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: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" 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!       @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/[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!         @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/[email protected]
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/[email protected]
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.

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

2. 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: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^16.8.0" 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!       @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/[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!         @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/[email protected]
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/[email protected]
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 -

1. Executed npx create-react-app netflix.
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 i @emotion/react @emotion/styled

Answer 1

It appears by the log that @mui/[email protected] 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",
    ...
  },

Answer 2

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

npm i material-ui --force