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.

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) => <Drawer variant=“persistent” anchor={props.anchor} open={props.drawerOpen} classes={{ paper: styles.drawerPaper, }}

<div className={styles.drawerHeader}>
  <IconButton onClick={props.handleDrawerClose}>
    {props.theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
  </IconButton>
</div>
<Divider />
<List>

</List>
<Divider />
<List>

</List>

</Drawer> ;

const HeaderComponent = (props) => { return( <div className={styles.root}> <TextField id="persistent-anchor" select label="Anchor" value={props.anchor} onChange={props.handleChangeAnchor} margin="normal" > <MenuItem value="left">left</MenuItem> <MenuItem value="right">right</MenuItem> </TextField> <div className={styles.appFrame}> <AppBar className={classNames(styles.appBar, { [styles.appBarShift]:props.drawerOpen, [styles[appBarShift-${props.anchor}]]: props.drawerOpen, })} > <Toolbar disableGutters={!props.drawerOpen}> <IconButton color=“inherit” aria-label=“open drawer” onClick={this.handleDrawerOpen} className={classNames(styles.menuButton, props.drawerOpen && styles.hide)} > <MenuIcon /> </IconButton> <Typography variant="title" color="inherit" noWrap> Persistent drawer </Typography> </Toolbar> </AppBar> {props.anchor === ‘left’ ? <ConsumerDrawer {…props}/> : null} <main className={classNames(styles.content, styles[content-${props.anchor}], { [styles.contentShift]: props.drawerOpen, [styles[contentShift-${props.anchor}]]: props.drawerOpen, })} > <div className={styles.drawerHeader} /> <Typography>{‘You think water moves fast? You should see ice.’}</Typography> </main> {props.anchor !== ‘left’ ? <ConsumerDrawer {…props}/> : null} </div> </div> ); }; 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 ( <ConsumerLayout /> ); } } 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(<App />, document.getElementById(‘root’)); registerServiceWorker(); `

Folder structure

[Risanshita]

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’

[support[bot]]

👋 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.