MUI dependency error npm install @mui/icons-material

Question

$ npm install @mui/icons-material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"16.8.6" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/[email protected]
npm ERR!   node_modules/@emotion/react
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/[email protected]
npm ERR!     node_modules/@mui/material
npm ERR!       peer @mui/material@"^5.0.0" from @mui/[email protected]
npm ERR!       node_modules/@mui/icons-material
npm ERR!         @mui/icons-material@"*" from the root project
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/[email protected]
npm ERR!     node_modules/@emotion/styled
npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/[email protected]
npm ERR!       node_modules/@mui/material
npm ERR!         peer @mui/material@"^5.0.0" from @mui/[email protected]
npm ERR!         node_modules/@mui/icons-material
npm ERR!   1 more (@emotion/styled)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^18.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/material
npm ERR!   peer @mui/material@"^5.0.0" from @mui/[email protected]
npm ERR!   node_modules/@mui/icons-material
npm ERR!     @mui/icons-material@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

type here

I install the npm package mentioned on npm page. npm install @material-ui/icons

1. Link :- https://www.npmjs.com/package/@material-ui/icons

But as per material ui home page they're asking below npm install npm install @mui/icons-material 2. Link :- https://mui.com/material-ui/icons/

while installing npm install @mui/icons-material getting error mentioned above.

Vogeley

Answer 1

The package you are trying to install depends on react@"^17.0.0 || ^18.0.0" but you are using [email protected]. Try to upgrade React in your project and then the npm install should work.

Gona

Hi my react version is => $ npm view react version 18.2.0. But in package.json it is 16.8.6... So can I change the package.json directly? – Vogeley

Even after changing the package.json to latest version. it is not working getting same error. – Vogeley

You need to change the version inside of package.json and then run npm install. That should update your dependencies. Alternatively, you could npm uninstall react and then npm install react to install the latest version – Gona

Answer 2

After doing more search found user who had the similar error.

Link :- StackOverLink

As per above link users have suggested the option mentioned in error log which is.

npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

They have suggested try forcing the install, but I'm not sure of implications. Install did worked though so if you're facing same issue the try forcing on your own risk as I'm not aware of implications.

npm install @mui/material --force

Vogeley