Borislav Hadzhiev
Last updated: Mar 16, 2022
Check out my new book
To solve the error "Module not found: Error: Can't resolve '@mui/material'",
make sure to install the package by opening your terminal in your project's root
directory and running the command
npm i @mui/material @emotion/react @emotion/styled
and restart your
development server.
Open your terminal in your project's root directory (where your package.json
file is located) and run the following commands:
# 👇️ with NPM npm install @mui/material @emotion/react @emotion/styled --force # 👇️ only if you use @mui/icons-material npm install @mui/icons-material --force # 👇️ only if you use @mui/lab npm install @mui/lab --force # ---------------------------------------------- # 👇️ with YARN yarn add @mui/material @emotion/react @emotion/styled # 👇️ only if you use @mui/icons-material yarn add @mui/icons-material # 👇️ only if you use @mui/lab yarn add @mui/lab
If you get an error while installing the packages, add the --force
flag at the
end.
The command will add the @mui/material package to the dependencies of your project.
If you use the @mui/icons-material and @mui/lab packages, make sure to install them as well as per the instructions above.
npm start
command.You should now be able to import and use the @mui/material
package in your
React.js app.
import Button from '@mui/material/Button'; function App() { return ( <div> <p> Hello world <Button variant="contained" color="primary"> Click </Button> </p> </div> ); } export default App;
If the error is not resolved, try to delete your node_modules
and
package-lock.json
(not package.json
) files, re-run npm install
and restart
your IDE.
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install
If you're still getting the "Module not found: Error: Can't resolve
'@mui/material'" error, open your package.json
file and make sure it contains
the @mui/material
package in the dependencies
object.
{ // ... rest "dependencies": { "@emotion/react": "^11.8.2", "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.5.1", "@mui/lab": "^5.0.0-alpha.75", "@mui/material": "^5.5.3", }, }
The @mui/material
module should NOT be globally installed or be in your
project's devDependencies
, it should be in the dependencies
object in your
package.json
file.
You can try to manually add the lines and re-run npm install
.
npm install
Or install the latest version of the package:
npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest --force # 👇️ only if you use @mui/icons-material npm install @mui/icons-material@latest --force # 👇️ only if you use @mui/lab npm install @mui/lab@latest --force