Han
Han

Reputation: 628

Module not found: Can't resolve '@mui/material/utils' : (v5, which included a name change.)

I can see this error when I attempted to import some Icons from Material UI. I installed some modules as advised, but still not fixed.

package.json

    "@material-ui/core": "^4.12.3",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.49",

I attempted to install /utils by using the following command,

$ npm install @mui/material/utils

ERROR:

npm ERR! code ENOLOCAL
npm ERR! Could not install from "@mui\material\utils" as it does not 
contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Han\AppData\Roaming\npm-cache\_logs\2021-10-03T21_47_03_649Z-debug.log

Is there anything I missed?

**After some reserch, I removed "@material-ui/core" and install "@mui/core" instead. I assume this error comes up since there is name changed from material to mui?

    "@mui/core": "^5.0.0-alpha.49",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.49",
    "@mui/utils": "^5.0.1",

Thanks.

Upvotes: 55

Views: 187249

Answers (7)

kaushalyap
kaushalyap

Reputation: 13597

In my case I was getting a similar error after v5 minor version upgrade of @mui/icons-material, @mui/material packages.

Module not found: Can't resolve '@mui/material/utils/default'

Issue was fixed changing the icon import statements from

import { Done } from '@mui/icons-material' // destructured import

to

import Print from '@mui/icons-material/Print' // direct import

Upvotes: 0

SIDDHARTH MISHRA
SIDDHARTH MISHRA

Reputation: 717

Try this command npm install @mui/material @emotion/react @emotion/styled

See the installation instructions for react mui.

Upvotes: 70

You can try installing the module if it isn't already! Try running this in case you have NPM:

npm install @mui/icons-material

Or, with Yarn:

yarn add @mui/icons-material

Upvotes: 1

Gass
Gass

Reputation: 9344

Why does it happen?

This error happens when installing the MUI icons package before installing the MUI component library. The MUI icons package needs @mui/material @emotion/react @emotion/styled packages to work properly.

Solution

Run one of the following lines

// with npm
npm install @mui/material @emotion/react @emotion/styled

// or if you prefer yarn
yarn add @mui/material @emotion/react @emotion/styled

Upvotes: 36

Good Choice
Good Choice

Reputation: 11

I added all the packages and it still didn't work, so I commented my imports and uncommented them and it worked. So if you imported them and it still doesn't work, give this a try or reset your IDE.

Upvotes: 1

Pratik Kharad
Pratik Kharad

Reputation: 1

Step 1 : npm install @mui/material @emotion/react @emotion/styled

Step 2 Import this file in your project : import TextField from '@mui/material/TextField';

This will definitely solve your error

node -- version : v16.17.0 npm -- version : 8.15.0

Upvotes: 0

Tahseen Quraishi
Tahseen Quraishi

Reputation: 1543

Try to install the main package.

 npm i @mui/material

This will definitely solve your problem

Upvotes: 3

Related Questions