Could not resolve dependency error peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]

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: [email protected]
        npm ERR! Found: [email protected]
        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/[email protected]
        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"
        ]
      }
    }

Nomanomad

Obey packages semver unless you have a really good reason not to. Downgrade react (easy) to upgrade material ui (hard) – Jola

@AdamJenkins Could you explain in more detail or make an answer for those of us who hit this error while just getting started with React? I get that you're saying it is easier to downgrade React than to upgrade Material UI, but it makes no sense to me how to do either or why. And by semver did you mean semantic version? Typo? Something else? – Fabaceous

@Fabaceous the sense of downgrade one or another is that the 2 libraries mentioned in the post unfortunately conflicting in terms of API exposed. In the end JS modules, thus also React component are function that expose to other component some function. If one of those change signature here we go this sort of errors – Peewee

Answer 1

Try this

npm config set legacy-peer-deps true
npm i

Roana

Do i need to remove package-lock.json, node_modules first and then install it ? – Nomanomad

first try it directly if it doesn't works than remove. – Roana

Ok Sure, will try and reply back – Nomanomad

Installation is successfull but Now I am getting this error... Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Proj\work\sss\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Proj\Work\sss\node_modules\eslint-config-react-app\base.js". – Nomanomad

Not sure on this. – Roana

But if open the package.json and simply do a save will remove that error...but whenever i made any changes in any of the component, this error pops up which is annoying and each time i need to open package.json file and press save – Nomanomad

Check this out #70377711 – Roana

Good result, outstanding. works!! – Route

Nice!! This works because '--legacy-peer-deps',command will tell npm to ignore peer dependencies entirely, hence avoiding conflict. – Bathometer

Well, I remove package-lock.json and install commands as suggested by you. now its working. – Concerted

Could you add some explanation to this solution? I want to understand what I do, not just copy instructions from an SO post. That way, I can actually understand if there are downsides to a solution, instead of being caught by surprise by them later on... – Procuration

Using the legacy-peer-deps configuration can potentially result in a broken dependency resolution, so it's recommended to only use it as a temporary workaround until you can update your dependencies to resolve the conflicts. – Cuprite

It works great with com.github.node-gradle.node plugin. – Garrote

Answer 2

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

Nation

explanation? documentation? – Amative

@johnk explanation: the sense of downgrade one or another is that the 2 libraries mentioned in the post unfortunately conflicting in terms of API exposed. In the end JS modules, thus also React component are function that expose to other component some function. If one of those change signature here we go this sort of error – Peewee

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

Ophite

does it safe to do it in production? – Pacifism

very well explained @rizwan – Worldly

@Pacifism when I get the error, they give you the option to use --legacy-peer-deps, but they also say: 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. So i guess this is not the best option but is faster than check one per one dependency? – Bivens

Answer 4

Delete the node_modules folder and try this following command

npm config set legacy-peer-deps true
npm install

Career

Answer 5

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

Declan

This answer is what solved it for me. – Anthropography

solution with vercel to... tks! – Titanesque

This is basically an answer that unfortunately do not let understand the root of the issue. The issue mismatch in API libraries, in this case React and Material UI – Peewee

Answer 6

Mine worked using:

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

Twiddle

Answer 7

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

Castro

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

Mccay

Answer 9

I solved it this way in my app folder:

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

Eiten

Answer 10

Delete complete node_modules => folder Run command...

npm install

Anta

Answer 11

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 I 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'

Peewee