Could not resolve dependency error peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4

Question

While trying to install npm install, I am getting below error, how to resolve it?

$

npm install
        npm ERR! code ERESOLVE
        npm ERR! ERESOLVE unable to resolve dependency tree
        npm ERR!
        npm ERR! While resolving: sssclub@0.1.0
        npm ERR! Found: react@18.1.0
        npm ERR! node_modules/react
        npm ERR!   react@"^18.0.0" from the root project
        npm ERR!
        npm ERR! Could not resolve dependency:
        npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
        npm ERR! node_modules/@material-ui/core
        npm ERR!   @material-ui/core@"^4.12.4" 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.

// package.json

{
      "name": "sssclub",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@emotion/react": "^11.9.0",
        "@emotion/styled": "^11.8.1",
        "@material-ui/core": "^4.12.4",
        "@mui/icons-material": "^5.8.3",
        "@mui/material": "^5.8.3",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.1.1",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^0.27.2",
        "cors": "^2.8.5",
        "express": "^4.18.1",
        "multer": "^1.4.4",
        "mysql2": "^2.3.3",
        "path": "^0.12.7",
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "react-hook-form": "^7.31.2",
        "react-router-dom": "^6.3.0",
        "react-scripts": "^5.0.1",
        "react-tweet-embed": "^2.0.0",
        "sequelize": "^6.20.1",
        "web-vitals": "^2.1.4"
      },
      "engines": {
        "node": "16.14.2",
        "npm": "8.5.0"
      },
      "proxy": "http://localhost:8000",
      "scripts": {
        "start": "react-scripts start",
        "start:server": "node src/server.js",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "preinstall": "npx npm-force-resolutions"
      },
      "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"
        ]
      }
    }

Answer 1

The correct answer is that material-ui version at the time of writing the question was not compatible(some API mismatch) with React 18.

As I am writing the version of Material UI from v5 it is compatible but they did change indeed API, thus also probably some renaming of imports etc should be done.

as from MUi docs

add this peerDependencies into your package.json

 "peerDependencies": {
 "react": "^17.0.0 || ^18.0.0",
 "react-dom": "^17.0.0 || ^18.0.0"
},

Nevertheless for the sake of installation this should work:

uninstall

@material-ui/core @material-ui/icons @material-ui/lab

and all others related material UI v4

install instead those dependencies

@mui/material @emotion/react @emotion/styled

and also as I can guess

 @popperjs/core

As this one was used in past in Bootstrap and is reused by Material UI v5 now called MUI

Check in all your codebase reference of such

from '@material-ui/core'

et similar and update with correct one for example:

from '@mui/material'

Answer 2

You could also use npm install --force, it did work for me but I believe that npm config set legacy-peer-deps true will also work. See which works best :D

Answer 3

Above all solutions are true. Here I will explain a solution to why we need to set legacy-peer-deps in the app.

The concept of peer dependencies can cause challenges when installing packages. Consider the following scenario:

Package A requires Package B, and both have a common peer dependency, Package C. However, Package A requires Package C in version 1.x, while Package B requires Package C in version 2.x.

When you try to install Package A and Package B together in your project, npm might encounter a conflict due to the different peer dependency versions required by each package. This can lead to installation failures, and it becomes challenging to resolve the conflicts manually.

"npm config set legacy-peer-deps true"

To alleviate the complications caused by conflicting peer dependencies, npm introduced the "legacy-peer-deps" configuration flag. When set to true, this flag instructs npm to revert to the older behavior of installing packages with peer dependencies.

The "legacy-peer-deps" flag works as follows:

If a package declares a peer dependency, npm will install the specified version without verifying if it satisfies the version range expected by the dependent package.

The flag disables the strict version checking for peer dependencies, making it more permissive during the installation process.

Usage and Example

To set the "legacy-peer-deps" flag to true, open your terminal and run the following commands:

npm config set legacy-peer-deps true
npm install

Answer 4

Best way is to use YARN instead of NPM. Delete the node_modules folder and install dependencies using yarn. Run command yarn and it will resolve dependencies itself. install yarn as global package if its not installed using command npm install -g yarn

Answer 5

Instead of npm install, please use npm install --legacy-peer-deps.

Answer 6

Mine worked using:

npm i @testing-library/react-native@latest react-test-renderer --save --legacy-peer-deps

Answer 7

I solved it this way in my app folder:

C:\Users\Me\App> npm i react-speech-kit --legacy-peer-deps

Answer 8

I had this error with Heroku deployment. So no matter what code you change, it will never run on your hosting server if this is the error. I had the same issue and after trying every fix, I realized the solution was just to delete my entire Heroku app and then recreate the app and upload the older code (Last commit that worked). Heroku and other deployment servers keep caches and settings which become way too far gone and corrupt once they encounter a horrific piece of new code which makes the server crash indefinitely.

You have to just delete your entire app on the server and start a completely brand new app based on the last commit where your code was last working/running on the server. (You should be able to maintain the same name.)

But there is some type of horrible mine in your recent commit which caused the entire server to remain crashed forever until it's destruction and recreation most likely.

Most likely the cause are some comments that the server is unable to ignore as your local is able to ignore. Delete all comments and try to reload your code again on a NEW SERVER INSTANCE. Comments that use {/* are extremely unfriendly compared to comments with //

Another extremely unfriendly piece of code are older html shortcut tags such as  

A final case would be to remove unnecessary lifecycle methods.

But the most important thing here is to completely destroy your server instance and start over with code which doesn't completely corrupt your server forever due to some line of recent code.

At least this was my case with Heroku.

(Also, Using Websites such as Digital Ocean for hosting tend to give you better error messages which has helped me in the past to realize errors sooner, although it might be a little more costly.)

Answer 9

Delete complete node_modules => folder Run command...

npm install

Answer 10

Delete the node_modules folder and try this following command

npm config set legacy-peer-deps true
npm install

Answer 11

Try this

npm config set legacy-peer-deps true
npm i