React / React-DOM package dependency conflict

Question

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?

Answer 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

Answer 2

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