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: react@17.0.1
npm WARN node_modules/react
npm WARN peer react@"" from @testing-/react@11.2.3
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 react-popper@1.3.7
npm WARN node_modules/react-popper
npm WARN react-popper@"^1.3.6" from reactstrap@8.9.0
npm WARN node_modules/reactstrap
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR! peer react@"" from @testing-/react@11.2.3
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 react-dom@17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@"" from @testing-/react@11.2.3
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 create-react-context@0.3.0
npm ERR! node_modules/react-popper/node_modules/create-react-context
npm ERR! create-react-context@"^0.3.0" from react-popper@1.3.7
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.

score 19 · Answer 1 · answered Jan 26 '21 at 19:41

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.

score 12 · Answer 2 · answered Apr 14 '22 at 20:49

12

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

answered Apr 14 '22 at 20:49

MoOx

8,423
5
40
39

`npm ERR! Unable to resolve reference $react` – Sebastian Nielsen Jul 19 '22 at 15:18
Double check your NPM version. – MoOx Jul 20 '22 at 16:17
Using latest version of npm 8.19.1 and still getting `npm ERR! Unable to resolve reference $react` i have double checked that react exists on dependencies but still the same error . – GOXR3PLUS Oct 03 '22 at 21:13
I am not sure why, but in some project I explicitly mentioned the version instead of using ${package}.... – MoOx Oct 05 '22 at 10:31

score 2 · Answer 3 · answered Apr 10 '23 at 16:47

There is 2 ways to fix this.

Method 1:

You can specify --legacy-peer-deps flag when you install a new package.

# For NPM
npm install package_name --legacy-peer-deps

#For Yarn
yarn add package_name --legacy-peer-deps

Method 2:

If you dont want to specify the --legacy-peer-deps flag everytime when you install a new package for the project.

You can simply create a file at the root directory of your project. The file name will be .npmrc (For NPM) or .yarnrc (For Yarn). Update the file with this:

For .npmrc:

legacy-peer-deps=true

For .yarnrc:

npmClientArgs: "--legacy-peer-deps"

Hope it helps you :)

score 0 · Answer 4 · answered Feb 16 '23 at 11:18

0

Delete node modules, then npm i reactstrap --legacy-peer-deps then npm install --force solved it for me

answered Feb 16 '23 at 11:18

Youssef Abdelmonsef

89
1
4

score 0 · Answer 5 · answered Apr 10 '23 at 16:21

0

To install any dependency forcefully run the below command: npm i --force this command install the package forcefully without giving any error.

answered Apr 10 '23 at 16:21

Zain Raza

1

score -7 · Answer 6 · edited Mar 29 '21 at 01:44

-7

To resolve REACT_SPRING installation issue try

npm install  --force

then

npm audit fix --force

edited Mar 29 '21 at 01:44

answered Mar 28 '21 at 10:20

yvan

7

Error overriding peer dependency - npm install reactstrap

6 Answers6

Method 1:

Method 2: