8

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

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225

5 Answers5

7

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).

Trevor
  • 121
  • 1
  • 1
  • 6
  • does this mean I need to manually install `@babel/core` in my project? – Bryan Lumbantobing Jul 30 '22 at 13:24
  • 1
    Shouldn't be necessary, rather let NPM sort it out. Instead of simply running "npm install", try "npm install --legacy-peer-deps" or if that doesn't work out then "npm install --force". NPM installs peer deps like babel automatically by default, that extra flag helps resolve version conflicts if there are any. – Trevor Aug 02 '22 at 08:17
7

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...

chiziivictor
  • 181
  • 2
  • 3
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.

Ajay jangid
  • 711
  • 9
  • 9
2

Try using

npm install @material-ui/core --force
Naziru
  • 21
  • 1
-1

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
Aman Chauhan
  • 31
  • 3