Error overriding peer dependency - npm install reactstrap

Question

"@popperjs/core": "^2.6.0",
"@testing-/jest-dom": "^5.11.9",
"@testing-/react": "^11.2.3",
"@testing-/user-event": "^12.6.2",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"react-transition-group": "^4.4.1",

versions of dependencies I have in package.json file.

G:\Projects\React\confusion> npm install --save reactstrap

npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN peer react@"" from @testing-/[email protected]
npm WARN node_modules/@testing-/react
npm WARN @testing-/react@"^11.2.3" from the root project
npm WARN 3 more (react-dom, the root project, reactstrap)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"0.14.x || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/react-popper
npm WARN react-popper@"^1.3.6" from [email protected]
npm WARN node_modules/reactstrap
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"" from @testing-/[email protected]
npm ERR! node_modules/@testing-/react
npm ERR! @testing-/react@"^11.2.3" from the root project
npm ERR! peer react@"17.0.1" from [email protected]
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@"" from @testing-/[email protected]
npm ERR! node_modules/@testing-/react
npm ERR! @testing-/react@"^11.2.3" from the root project
npm ERR! react-dom@"^17.0.1" from the root project
npm ERR! 1 more (reactstrap)
npm ERR! 2 more (the root project, reactstrap)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-popper/node_modules/create-react-context
npm ERR! create-react-context@"^0.3.0" from [email protected]
npm ERR! node_modules/react-popper
npm ERR! node_modules/reactstrap
npm ERR! reactstrap@"" 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.

Solution 1

This is because of a change in npm version 7. See the breaking changes section here. You can fix it by using the flag the error tells you to use at the bottom: npm i reactstrap --legacy-peer-deps. If one of your other dependencies already has reactstrap as a peer dependency, you might not need to install it at all (you can check with npm ls reactstrap), due to the change in v7.

Solution 2

Try something like this in your package.json

  "engines": {
    "npm": ">=8.7.0"
  },
  "overrides": {
    "react": "$react"
  }

This will force react to be the version defined in your "dependencies" for all dependencies (& deps of deps). You need "recent" npm as it was buggy in some version (I had 8.3.0 and overrides wasn't working). 8.7.0 seems ok !

See https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides