Module not found: Can’t resolve ‘@mui/material’ – How To Fix It?

This article will help you find the answer to the “Module not found: Can’t resolve ‘@mui/material'” error in React. This error is related to the Material UI installation in your computer. Let’s see the solutions below.

Why do we have this error?

Material UI is an open-source library of React UI components. It implements Google’s material design, providing many beautiful designs that are highly customizable and easy to use.

You can’t use Material UI in your project because you don’t have it installed on your computer.

To use this library, you need to install it via the npm install command. If not, you will get an error message: “Module not found: Can’t resolve ‘@mui/material'”.

Case of error

For example, in this case, if the package is not installed on your machine, an error will arise.

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';

Output:

The solution to fix the error “Module not found: Can’t resolve ‘@mui/material'” in React

To fix this error, you must install the @mui/material package before using it. Open the terminal and run the following command to save it in your ‘dependencies’ object of package.json file:

:: npm command
npm install @mui/material @emotion/react @emotion/styled

:: yarn command
yarn add @mui/material @emotion/react @emotion/styled

If the above commands cannot be used, try re-running it with the --force flag.

:: npm command
npm install @mui/material @emotion/react @emotion/styled --force

:: yarn command
yarn add @mui/material @emotion/react @emotion/styled --force

After installing the @mui/material package, it must be in the ‘dependencies’ object. Otherwise, your installation made an error. Your package.json file should look like this:

{
    ...
    "dependencies": {
        ...
        "@emotion/react": "^11.8.4",
        "@emotion/styled": "^11.8.2",
        "@mui/material": "^5.10.6",
        ... 
	},
  	...
}

Alternatively, you can try to manually enter the above lines in the ‘dependencies’ object of package.json file, filling in the version you want to install. Finally, run the npm install command to install them.

If you still get the error, try removing folder ‘node_modules’ and ‘package-lock.json’ file, then run npm install:

rm -rf node_modules
rm -f package-lock.json
npm install

When these commands are done, restart the IDE to avoid unexpected errors.

One last note for you to do the installation correctly: In Material UI, ’emotion’ is used as its styling engine by default. In case of using styled-components to replace ’emotion’, install @mui/material as follows:

:: npm command
npm install @mui/material @mui/styled-engine-sc styled-components

:: yarn command
yarn add @mui/material @mui/styled-engine-sc styled-components

Summary

In conclusion, you have gone through a few error cases and their respective fixes to better understand the source of the “Module not found: Can’t resolve ‘@mui/material’” error in JavaScript. I hope this article is helpful for you. Thank you for reading!

Maybe you are interested:

• useNavigate() may be used only in the context of a Router component
• Module not found: Can’t resolve ‘react/jsx-runtime’
• module not found: can’t resolve @emotion/react

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js