'React / React-DOM package dependency conflict

I've been running into this error message every time I try to run npm update:

:

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 @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.11.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from [email protected]
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^17.0.1" from the root project

I get this error message in the console when I try to run npm install react-parallax:

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.x.x" from [email protected]
npm ERR!   node_modules/react-parallax
npm ERR!     react-parallax@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from [email protected]
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^17.0.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.

Here is my current package.json:

{
  "name": "my-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^16.8.0",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.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"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "enzyme-to-json": "^3.6.1"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "collectCoverageFrom": [
      "src/**/*.js",
      "!src/index.js"
    ],
    "coverageReporters": [
      "text"
    ]
  }
}

I have tried deleting my node_modules folder, npm installing but that doesn't seem to do the trick. I haven't spent a lot of time dealing with these types of bugs to understanding what exactly the console is requesting me to fix is a little alien to me. What exactly is the problem, how do I fix it, and how to I stop this from happening in the future?

reactjsnpmnpm-installpackage.json


Solution 1:[1]

Can you try running it with npm install --legacy-peer-deps. I think you are using the latest Beta release of npm v7.

It's mentioned in the Error message as well.

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.

You can check more about the beta release here

Solution 2:[2]

You can use npm install --legacy-peer-deps which will automatically resolve all the conflict.

Solution 3:[3]

You can try npm install --force if only this Answer is not working.

Waning - NOT A GOOD PRACTICE

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ganesh Ravi Shankar
Solution 2 Fahad
Solution 3 Nilupul Heshan

Related Questions