ERESOLVE unable to resolve dependency tree - for #mui/material - npm

Question

I am trying to install material UI as described on the home page, but I get a dependency tree error :
C:\dev\shape-shop-front-end>npm install #mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app#0.1.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.13.1" from the root project
npm ERR! peer react#">=16.8.0" from #emotion/react#11.7.1
npm ERR! node_modules/#emotion/react
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"*" from the root project
npm ERR!
In my package.json I have "react": "^16.13.1" .
As I understand it, this error is saying that a MUI package needs react 16.8.0

Answer 1

Indeed, a sub-dependency of it, named #emotion/react#11.7.1, has listed the following peer dependencies you have to meet:
"peerDependencies": {
"#babel/core": "^7.0.0",
"react": ">=16.8.0"
}
source: https://github.com/emotion-js/emotion/blob/main/packages/react/package.json
I think this has to do with how new versions of NPM deal with peer dependencies: https://github.blog/2021-02-02-npm-7-is-now-generally-available/
As your react version seems OK, I would go with this suggestion:
You have the option to retry with --force to bypass the conflict or --legacy-peer-deps command to ignore peer dependencies entirely (this behavior is similar to versions 4-6).

Answer 2

Try using --force.
That's what worked for me
npm install #mui/material --force
I have a feeling it's a dependency conflict that came with the recent React upgrade...

Answer 3

Looks like updating dependencies in package.json is the only way to make this happen now.
$ npm install -g npm-check-updates
$ ncu -u
$ npm install
or see how to update each dependency in package.json
after updating, now try to install your material UI.

Answer 4

use this command instead
npm install #material-ui/core
If you're using it for the icon, then use this
npm install #material-ui/core #material-ui/icons

Answer 5

Try using
npm install #material-ui/core --force