Пользовательский интерфейс материала v1 - SwipeableDrawer: недопустимый тип элемента

Question

Я реализовал SwipeableDrawer и получаю печально известную ошибку:

×

 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.

Check the render method of `SwipeableDrawer`.

Я думаю, что я установил все необходимые реквизиты, как это сделано в демоверсиях. Вот реализация.

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
import IconButton from '@material-ui/core/IconButton'
import MenuIcon from '@material-ui/icons/Menu'
import List from '@material-ui/core/List'
import Divider from '@material-ui/core/Divider'
import { drawerListItems } from './DrawerListItems'

const styles = {
    list: {
        width: 250,
    },
    fullList: {
        width: 'auto',
    },
};

class SwipeableTemporaryDrawer extends React.Component {
    state = {
        left: false,
    };

    toggleDrawer = (open) => () => {
        this.setState({
            left: open
        });
    };

    render() {
        const { classes } = this.props;

        const sideList = (
            <div className={classes.list}>
                <List>{drawerListItems}</List>
                <Divider />
                <List>{drawerListItems}</List>
            </div>
        );

        return (
            <div>
                <IconButton className={classes.menuButton} color="inherit" onClick={this.toggleDrawer(true)}>
                    <MenuIcon />
                </IconButton>
                <SwipeableDrawer
                    open={this.state.left}
                    onClose={this.toggleDrawer(false)}
                    onOpen={this.toggleDrawer(true)}
                >
                    <div
                        tabIndex={0}
                        role="button"
                        onClick={this.toggleDrawer( false)}
                        onKeyDown={this.toggleDrawer(false)}
                    >
                        {sideList}
                    </div>
                </SwipeableDrawer>
            </div>
        );
    }
}

SwipeableTemporaryDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SwipeableTemporaryDrawer);

DrawableListItems.js

import React from 'react';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import StarIcon from '@material-ui/icons/Star';
import SendIcon from '@material-ui/icons/Send';

export const DrawerListItems = (
    <div>
        <ListItem button>
            <ListItemIcon>
                <InboxIcon />
            </ListItemIcon>
            <ListItemText primary="Inbox" />
        </ListItem>
        <ListItem button>
            <ListItemIcon>
                <StarIcon />
            </ListItemIcon>
            <ListItemText primary="Starred" />
        </ListItem>
        <ListItem button>
            <ListItemIcon>
                <SendIcon />
            </ListItemIcon>
            <ListItemText primary="Send mail" />
        </ListItem>
        <ListItem button>
            <ListItemIcon>
                <DraftsIcon />
            </ListItemIcon>
            <ListItemText primary="Drafts" />
        </ListItem>
    </div>
);

package.json

{
  "name": "find-swim",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/codemod": "^1.1.0",
    "@material-ui/core": "^1.2.0",
    "@material-ui/icons": "^1.1.0",
    "firebase": "^4.8.0",
    "material-ui": "^0.19.4",
    "material-ui-autocomplete-google-places": "^2.2.0",
    "material-ui-places": "^1.1.7",
    "mui-places-autocomplete": "^2.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-ga": "^2.4.1",
    "react-google-button": "^0.4.0",
    "react-google-maps": "^9.2.2",
    "react-places-autocomplete": "^5.4.3",
    "react-redux": "^5.0.6",
    "react-redux-firebase": "^2.0.0-beta.16",
    "react-redux-form": "^1.16.5",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.16",
    "react-tap-event-plugin": "^3.0.2",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-devtools": "^3.4.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "set GENERATE_SOURCEMAP=false && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "firebase deploy"
  },
  "devDependencies": {
    "redux-devtools-extension": "^2.13.2"
  }
}

Может ли какое-либо тело обнаружить ошибку?

Заранее спасибо.

Answer 1

В моем случае у меня был импорт { AppBar } от '@material-ui/core/AppBar' и это не удалось, и удаление {} исправил это для меня, вот так:

Снятие скобок при импорте