Issue with Material UI Icons npm installation : unable to resolve dependency tree

Question

---------ISSUE RESOLVED - SOLUTION AT THE END OF QUESTION--------

I was trying to install Material UI Icons in my Netflix-Clone React.js project with npm, but I got the following error -

PS D:\REACT Projects\netflix> npm i @mui/icons-material @mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: netflix@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.8.2
npm ERR!   node_modules/@emotion/react
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.5.3
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.5.3" from the root project
npm ERR!       1 more (@mui/icons-material)
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.8.1
npm ERR!     node_modules/@emotion/styled
npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.5.3
npm ERR!       node_modules/@mui/material
npm ERR!         @mui/material@"^5.5.3" from the root project
npm ERR!         1 more (@mui/icons-material)
npm ERR!   1 more (@emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/material@5.5.3
npm ERR! node_modules/@mui/material
npm ERR!   @mui/material@"^5.5.3" from the root project
npm ERR!   peer @mui/material@"^5.0.0" from @mui/icons-material@5.5.1
npm ERR!   node_modules/@mui/icons-material
npm ERR!     @mui/icons-material@"^5.5.1" 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.

Below is my package.json file -

{
  "name": "netflix",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mui/icons-material": "^5.5.1",
    "@mui/material": "^5.5.3",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^14.0.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "sass": "^1.49.10",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I saw a stackoverflow post with similar issue, and tried implementing the solutions mentioned there, but was unsuccessful.

At first, I retried this command with --force - npm i @mui/icons-material @mui/material --force

This allowed me to install the MUI Icons package without any error, however, I faced numerous errors when I tried to use the icons in my project.

Next, I changed the react and react-dom versions to 16.8.0 in the package.json file, and hit npm install. However, this time also I got the following error -

PS D:\REACT Projects\netflix> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netflix@0.1.0
npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR!   react@"^16.8.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.8.2
npm ERR!   node_modules/@emotion/react
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.5.3
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.5.3" from the root project
npm ERR!       1 more (@mui/icons-material)
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.8.1
npm ERR!     node_modules/@emotion/styled
npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.5.3
npm ERR!       node_modules/@mui/material
npm ERR!         @mui/material@"^5.5.3" from the root project
npm ERR!         1 more (@mui/icons-material)
npm ERR!   1 more (@emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/material@5.5.3
npm ERR! node_modules/@mui/material
npm ERR!   @mui/material@"^5.5.3" from the root project
npm ERR!   peer @mui/material@"^5.0.0" from @mui/icons-material@5.5.1
npm ERR!   node_modules/@mui/icons-material
npm ERR!     @mui/icons-material@"^5.5.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry

I honestly don't know what to do now. I thought there would be a better solution available on the internet, but everywhere I see the same answers, either to use --force/--legacy-peer-deps or to downgrade my react/react-dom version. As explained above, none of these options are working. Is there any better solution to this? I'm honestly surprised that such a well-known package would have this many problems while installing.

EDIT - Issue Resolved
Thanks to @ckesplin's help, it finally worked. I followed the below steps -

Executed npx create-react-app netflix.
Changed react and react-dom version to 17.0.0 from 18.0.0.
Deleted package-lock.json file and node_modules folder. Then hit npm install.
Executed npm i @mui/icons-material @mui/material... it installed successfully.
However, while using an icon, I again got a bunch of errors for Module not found: Can't resolve @emotion/styled. So I had to npm i @emotion/react @emotion/styled

score 6 · Answer 1 · answered Apr 03 '22 at 04:51

6

It appears by the log that @mui/material@5.5.3 requires react@"^17.0.0". (You attempted both react 18.0.0 and 16.14.0, but not ^17.0.0)

Replace the following inside of your package.json and give it the ol' npm install

 "dependencies": {
    ...
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    ...
  },

answered Apr 03 '22 at 04:51

ckesplin

1,284
1
9
15

Hi @ckesplin, actually I also tried with 17.0.0 later. I got the same peer dependency error. – Ankit_M Apr 03 '22 at 06:40
1

Did you delete your node modules folder and do a fresh install of the dependencies? – ckesplin Apr 03 '22 at 06:58
2

Hi @ckesplin, thanks - at last it worked. I followed the below steps - 1. Executed `npx create-react-app`. 2. Changed `react` and `react-dom` version to 17.0.0 from 18.0.0. 3. Deleted `package-lock.json` file and `node_modules` folder. Then hit `npm install`. 4. Executed `npm i @mui/icons-material @mui/material`... it installed successfully. 5. However, while using an icon, I again got a bunch of errors for `Module not found: Can't resolve '@emotion/styled`. So I had to `npm install @emotion/react @emotion/styled`. – Ankit_M Apr 04 '22 at 10:12

score 2 · Answer 2 · answered May 18 '22 at 11:28

2

This has happened with me too you can install it using --force at the last of the command.

npm i material-ui --force

answered May 18 '22 at 11:28

Tamanpreet Singh

21
1

score 1 · Answer 3 · answered Apr 04 '22 at 10:05

1

try the command with --force. npm i @mui/icons-material @mui/material --force. this worked for me.

answered Apr 04 '22 at 10:05

Aditÿä Vïnäÿäk

11
1

Hi @Aditya, I actually did that, and it was installed successfully. However, I faced several errors related to peer dependency when I tried to use the MUI icons in my project. However, I have now solved the problem. If you want, you can check out [this answer](https://stackoverflow.com/a/71723102/18590376) to find what I did. – Ankit_M Apr 04 '22 at 10:31

Issue with Material UI Icons npm installation : unable to resolve dependency tree

3 Answers3

Linked