Material-ui: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Created on 18 Jun 2018 · 5Comments · Source: mui-org/material-ui

index.js

`import React, { Component, Fragment } from 'react';
import Header from './Header/header.container';

import { Router, browserHistory, Route, Link } from 'react-router';
import logo from '../../logo.svg';
import '../../App.css';

class ConsumerLayout extends Component{
constructor(props)
{
super(props);
}

render(){
    const Page = ({ title }) => (
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>{title}</h2>
          </div>
          <p className="App-intro">
            This is the {title} page.
          </p>
          <p>
            <Link to="/">Home</Link>
          </p>
          <p>
            <Link to="/about">About</Link>
          </p>
          <p>
            <Link to="/settings">Settings</Link>
          </p>
        </div>
      );

      const Home = (props) => (
        <Page title="Home"/>
      );

      const About = (props) => (
        <Page title="About"/>
      );

      const Settings = (props) => (
        <Page title="Settings"/>
      );

    return(
        <Fragment>
            <Header /> 
            <Router history={browserHistory}>
                <Route path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/settings" component={Settings}/>
            </Router>   
      </Fragment>
    );
}

}
export default ConsumerLayout;`

header.container.js

`import React, { Component } from 'react';
import HeaderComponent from './header.component';
class Header extends Component{
constructor(props){
super(props);
this.state = {
anchorEl: null,
open: false,
drawerOpen: false,
anchor: 'left',
};
}

  handleDrawerOpen = () => {
    this.setState({ drawerOpen: true });
  };

  handleDrawerClose = () => {
    this.setState({ drawerOpen: false });
  };

  handleChangeAnchor = event => {
    this.setState({
      anchor: event.target.value,
    });
  };

handleClick = event => {
    this.setState({ open : !this.state.open,
        anchorEl: this.state.open ? null : event.currentTarget });
};

handleClose = (event) => {
    this.setState({ anchorEl: null });
};
addState = objs=> {
    this.setState(objs);
}
render(){ 
    return(
            <HeaderComponent {...{
                anchorEl: this.state.anchorEl,
                classes: this.props.classes,
                anchor:this.state.anchor,

                handleClose: this.handleClose,
                handleClick: this.handleClick,
                addState: this.addState
            }} />
    );        
}

}

export default Header;`

Header.component.js

`import React from 'react';
import { Manager, Target, Popper } from 'react-popper';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import {
Button,
MenuItem,
Collapse,
ClickAwayListener,
MenuList,
Paper,
Drawer,
AppBar,
Toolbar,
List,
Typography,
TextField ,
Divider,
IconButton,
MenuIcon ,
ChevronLeftIcon,
ChevronRightIcon
} from '@material-ui/core/Drawer';

let styles;
const ConsumerDrawer =(props) =>
variant="persistent"
anchor={props.anchor}
open={props.drawerOpen}
classes={{
paper: styles.drawerPaper,
}}
>

{props.theme.direction === 'rtl' ? : }

</List>
<Divider />
<List>

</List>

;

const HeaderComponent = (props) => {
return(

id="persistent-anchor"
select
label="Anchor"
value={props.anchor}
onChange={props.handleChangeAnchor}
margin="normal"
>
left
right

className={classNames(styles.appBar, {
[styles.appBarShift]:props.drawerOpen,
[styles[appBarShift-${props.anchor}]]: props.drawerOpen,
})}
>
color="inherit"
aria-label="open drawer"
onClick={this.handleDrawerOpen}
className={classNames(styles.menuButton, props.drawerOpen && styles.hide)}
>

Persistent drawer

{props.anchor === 'left' ? : null}
className={classNames(styles.content, styles[content-${props.anchor}], {
[styles.contentShift]: props.drawerOpen,
[styles[contentShift-${props.anchor}]]: props.drawerOpen,
})}
>

{'You think water moves fast? You should see ice.'}

{props.anchor !== 'left' ? : null}

);
};
const drawerWidth = 240;

styles = theme => ({
root: {
flexGrow: 1,
},
appFrame: {
height: 430,
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex',
width: '100%',
},
appBar: {
position: 'absolute',
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
width: calc(100% - ${drawerWidth}px),
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
'appBarShift-left': {
marginLeft: drawerWidth,
},
'appBarShift-right': {
marginRight: drawerWidth,
},
menuButton: {
marginLeft: 12,
marginRight: 20,
},
hide: {
display: 'none',
},
drawerPaper: {
position: 'relative',
width: drawerWidth,
},
drawerHeader: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
'content-left': {
marginLeft: -drawerWidth,
},
'content-right': {
marginRight: -drawerWidth,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
'contentShift-left': {
marginLeft: 0,
},
'contentShift-right': {
marginRight: 0,
},
});
HeaderComponent.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};

export default HeaderComponent;
//export default HeaderComponent;`

app.js

`import React, { Component } from 'react';
import ConsumerLayout from './ConsumerComponents/Layouts/index';

class App extends Component {
render() {
return (

);
}
}
export default App;

index.js

`import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();
`

Folder structure

support

Source

Risanshita

Most helpful comment

The problem was in my Header.component.js file

import {
Button,
MenuItem,
Collapse,
ClickAwayListener,
MenuList,
Paper,
Drawer,
AppBar,
Toolbar,
List,
Typography,
TextField ,
Divider,
IconButton,
MenuIcon ,
ChevronLeftIcon,
ChevronRightIcon
} from '@material-ui/core/Drawer';

I have import Components from the '@material-ui/core/Drawer' instead '@material-ui/core'

Risanshita on 20 Jul 2018

👍6

All 5 comments

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

support[bot] on 18 Jun 2018

What is the issue can u tell me??

Risanshita on 18 Jun 2018

@Risanshita Material UI just released v1.2.2. That version changes the react-popper dependency from v0.10 to 1.0. You are using the old Target component from react-popper in your code. That is the issue.

A quick fix would be to downgrade to an earlier material ui version. Change your package.json to match exactly the following for your @material-ui core version: 1.2.0. Note there is no caret ^.

If you want to migrate to Popper version 1, see what they did in this PR:
https://github.com/mui-org/material-ui/pull/11862/files#diff-40758c76f4d19fdf8731d57ca9338c16L59

nbkhope on 19 Jun 2018

@nbkhope Thanks for raising the popper.js issue.
@Risanshita Yes, you need to install [email protected]. Don't rely on the Material-UI transitive dependency.