64

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"
        ]
      }
    }
desertnaut
  • 57,590
  • 26
  • 140
  • 166
soccerway
  • 10,371
  • 19
  • 67
  • 132
  • Obey packages semver unless you have a really good reason not to. Downgrade react (easy) to upgrade material ui (hard) – Adam Jenkins May 23 '23 at 11:39
  • 1
    @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? – LabGecko Jul 09 '23 at 12:48

9 Answers9

185

Try this

npm config set legacy-peer-deps true
npm i
Aman Sadhwani
  • 2,902
  • 3
  • 16
  • 24
  • Do i need to remove package-lock.json, node_modules first and then install it ? – soccerway Jun 13 '22 at 01:50
  • 1
    first try it directly if it doesn't works than remove. – Aman Sadhwani Jun 13 '22 at 01:51
  • Ok Sure, will try and reply back – soccerway Jun 13 '22 at 01:52
  • 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". – soccerway Jun 13 '22 at 01:58
  • Not sure on this. – Aman Sadhwani Jun 13 '22 at 02:00
  • 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 – soccerway Jun 13 '22 at 02:00
  • 1
    Check this out https://stackoverflow.com/questions/70377211/error-when-deploying-react-app-and-it-keeps-sayings-plugin-react-was-confli – Aman Sadhwani Jun 13 '22 at 02:01
  • Good result, outstanding. works!! – PatsonLeaner Jul 27 '22 at 12:10
  • Nice!! This works because '--legacy-peer-deps',command will tell npm to ignore peer dependencies entirely, hence avoiding conflict. – Sanjay Oct 14 '22 at 11:05
  • Well, I remove package-lock.json and install commands as suggested by you. now its working. – Chetan Nada Jan 23 '23 at 16:10
  • 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... – Jasper Apr 26 '23 at 09:57
  • 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. – Ali Safari May 12 '23 at 16:39
32

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

desertnaut
  • 57,590
  • 26
  • 140
  • 166
Deepankur Singh
  • 354
  • 3
  • 4
14

Delete the node_modules folder and try this following command

npm config set legacy-peer-deps true
npm install
vimuth
  • 5,064
  • 33
  • 79
  • 116
NAVEEN S
  • 141
  • 2
5

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
Rizwan
  • 3,741
  • 2
  • 25
  • 22
1

Mine worked using:

npm i @testing-library/react-native@latest react-test-renderer --save --legacy-peer-deps
desertnaut
  • 57,590
  • 26
  • 140
  • 166
VAAA
  • 14,531
  • 28
  • 130
  • 253
0

Delete complete node_modules => folder Run command...

npm install

Nazir Rizwan
  • 11
  • 3
0

I solved it this way in my app folder:

C:\Users\Me\App> npm i react-speech-kit --legacy-peer-deps
Amin Matola
  • 137
  • 2
  • 7
-1

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

Ahmedakhtar11
  • 1,076
  • 11
  • 7
-1

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

Bilal Nasir
  • 205
  • 2
  • 10