I am trying to create a basic navigation bar with Material UI. The boilerplate template on Material-UI's doc site https://material-ui.com/components/app-bar/ is returning the following error in the browser:
"Attempted import error: '@material-ui/icons' does not contain a default export (imported as 'MenuIcon')."
I have installed @material-ui/core and @material-ui/icons using npm. See package.json:
{
"name": "profile_v4",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.8",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
My Navbar.js component file:
import React from 'react'
import { AppBar, Toolbar, IconButton, Typography, Button } from '@material-ui/core';
import MenuIcon from "@material-ui/icons";
const Navbar = () => {
return (
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
)
}
export default Navbar;
I have looked elsewhere on SO for a solve but all answers are a variation on "You have not installed npm material-ui/icons package" so I was hoping someone could tell me what I'm missing. Thanks in advance!
import { MenuIcon } from "@material-ui/icons";
or fully qualify the default import, i.e.import MenuIcon from "@material-ui/icons/MenuIcon";
See icons usage.import MenuIcon from '@material-ui/icons/Menu';
. Official docs are often helpful. It's still a typo IMO, but Mark has the correct imports in their answer.