Overriding peer dependency error on npm install

Question

I am trying to run npm install @react-navigation/native @react-navigation/native-stack but end up receiving these errors when doing so:

npm WARN ERESOLVE overriding peer dependency
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.0" from [email protected]
npm ERR!   node_modules/react-native-screens/node_modules/react-freeze
npm ERR!     react-freeze@"^1.0.0" from [email protected]
npm ERR!     node_modules/react-native-screens
npm ERR!       peer react-native-screens@">= 3.0.0" from @react-navigation/[email protected]
npm ERR!       node_modules/@react-navigation/native-stack
npm ERR!         @react-navigation/native-stack@"*" 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-native-web
npm ERR!   react-native-web@"^0.17.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=17.0.1" from [email protected]
npm ERR!   node_modules/react-native-web
npm ERR!     react-native-web@"^0.17.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.
npm ERR!
npm ERR! See /home/reptar/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/reptar/.npm/_logs/2022-06-15T11_49_30_010Z-debug-0.log

here is my package.json file:

  {
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.21.4",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-select-dropdown": "^1.0.9",
    "react-native-web": "^0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

Can someone walk me through on how to fix this? This is the thing I struggle the most with when I have to install or fix dependencies/packages.

============================UPDATE:

when I was trying to update react, I had to update react-dom at the same time or would get a similar error. So I ran npm i react@latest react-dom@latest. then I would try to run the navigation install again and would get the following error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"*" from @react-navigation/[email protected]
npm ERR!   node_modules/@react-navigation/native
npm ERR!     @react-navigation/native@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.13.1" from [email protected]
npm ERR! node_modules/react-native
npm ERR!   react-native@"https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz" from the root project
npm ERR!   peer react-native@"*" from @react-navigation/[email protected]
npm ERR!   node_modules/@react-navigation/native
npm ERR!     @react-navigation/native@"*" 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.

Stopple

I have a same problem it working fine but I installed a new os and then install everything again and then again use the project and when I did npm install I got the same error – Trowel

It is simple, you do what the error messages state. – Indre

Answer 1

Option 1 - Ignore the upstream dependency at your peril (as per error message):

npm install @react-navigation/native @react-navigation/native-stack --legacy-peer-deps

Option 2 - Update version of react that satisfies the upstream dependency (react@">=17.0.1"):

npm install [email protected] or latest version npm install react@latest

And then...

npm install @react-navigation/native @react-navigation/native-stack

Following your update, it is now clear from the line peer react-dom@">=17.0.1" from [email protected] that you should npm install [email protected] or a later version.

The peer dependency versions expected are in the error message - using semantic versioning.

Ekaterinoslav

I don't want to go with opt 1 since I don't favor forcing installs that don't fully fix the problem. I tried option 2 but get errors still; look at the update section in my question. would the --legacy-peer-deps work for this part though? – Stopple

I'm actually not to sure how --legacy-peer-deps works, but is it mainly just to help against modules being added that aren't compatible with react 17.0.1? – Stopple

Perhaps read this article - flaviocopes.com/npm-peer-dependencies "When a dependency is listed in a package as a peerDependency, it is not automatically installed. Instead, the code that includes the package must include it as its dependency." This is where downstream and upstream come from. Basically, a package having a peer dependancy will need that dependancy installed in the hosting project. – Ekaterinoslav

Please see updated solution. If you read the error message you can establish what peer dependency versions are required. Another approach would be to update all packages in the project with "npm update" and see if that solves your problem. As a side note, I have an Angular project that I need to use the switch --legacy-peer-deps on. – Ekaterinoslav

After update, it wouldn't let me update react and react-dom one at a time so i did it in one line, but now I am stuck on the next part which is the update in my question. At this point, I am just gonna go with the --legacy-peer-deps. These installs are getting too much everytime – Stopple

Answer 2

Use --legacy-peer-deps after your package name. as

npm install your-packages --legacy-peer-deps

Komsomolsk

Answer 3

In my case I had no chance of updating my react to its newest version, so

npm install @react-navigation/native @react-navigation/native-stack --force

worked for me <3

Choosey

Please explain how you fixed OP's problem – Mauritamauritania

In my case I had no chance of updating my react to its newest version, so npm install @react-navigation/native @react-navigation/native-stack --force worked for me <3 – Choosey

Please edit your post to include that explanation for everyone to see – Mauritamauritania

Answer 4

Replace

"react-native-web": "^0.17.1"

to "react-native-web": "^17.0.1"

and see if it works, think your packege.json is mimatched seeing the errors log

peer react@">=17.0.1" from [email protected]

Wendell

Answer 5

This is a very common error even when you try to use eas build if you are using expo or when you just do npm install to install npm dependencies. I solved it by doing the following:

I did this in my terminal in the root of my project:

expo doctor

It gave me this:

Expected package @expo/config-plugins@^5.0.2
Found invalid:
  @expo/[email protected]
  (for more info, run: npm why @expo/config-plugins)
Some dependencies are incompatible with the installed expo package version:
 - expo-status-bar - expected version: ~1.4.2 - actual version installed: 1.2.0
 - expo-updates - expected version: ~0.15.6 - actual version installed: 0.11.7
 - react - expected version: 18.1.0 - actual version installed: 18.2.0
 - react-dom - expected version: 18.1.0 - actual version installed: 17.0.1
 - react-native - expected version: 0.70.5 - actual version installed: 0.70.6
 - react-native-reanimated - expected version: ~2.12.0 - actual version installed: 2.13.0
 - react-native-safe-area-context - expected version: 4.4.1 - actual version installed: 3.3.2
 - react-native-screens - expected version: ~3.18.0 - actual version installed: 3.10.2
 - react-native-web - expected version: ~0.18.9 - actual version installed: 0.17.1
 - react-native-webview - expected version: 11.23.1 - actual version installed: 11.15.0
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo doctor --fix-dependencies,
or install individual packages by running expo install [package-name ...]

Then I did this:

expo doctor --fix-dependencies

Then I go this and no more errors:

Expected package @expo/config-plugins@^5.0.2
Found invalid:
  @expo/[email protected]
  (for more info, run: npm why @expo/config-plugins)
Some dependencies are incompatible with the installed expo package version:
 - expo-status-bar - expected version: ~1.4.2 - actual version installed: 1.2.0
 - expo-updates - expected version: ~0.15.6 - actual version installed: 0.11.7
 - react - expected version: 18.1.0 - actual version installed: 18.2.0
 - react-dom - expected version: 18.1.0 - actual version installed: 17.0.1
 - react-native - expected version: 0.70.5 - actual version installed: 0.70.6
 - react-native-reanimated - expected version: ~2.12.0 - actual version installed: 2.13.0
 - react-native-safe-area-context - expected version: 4.4.1 - actual version installed: 3.3.2
 - react-native-screens - expected version: ~3.18.0 - actual version installed: 3.10.2
 - react-native-web - expected version: ~0.18.9 - actual version installed: 0.17.1
 - react-native-webview - expected version: 11.23.1 - actual version installed: 11.15.0

This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo install

Installing 10 SDK 47.0.0 compatible native modules using npm.
> npm install

added 10 packages, removed 97 packages, changed 33 packages, and audited 1216 packages in 2m

57 packages are looking for funding
  run `npm fund` for details

7 vulnerabilities (1 low, 5 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Howarth