覆盖 npm 安装上的对等依赖错误

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: react-native-web@0.17.1
npm ERR! Found: react@16.13.1
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.0" from react-freeze@1.0.0
npm ERR!   node_modules/react-native-screens/node_modules/react-freeze
npm ERR!     react-freeze@"^1.0.0" from react-native-screens@3.13.1
npm ERR!     node_modules/react-native-screens
npm ERR!       peer react-native-screens@">= 3.0.0" from @react-navigation/native-stack@6.6.2
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 react-native-web@0.17.1
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: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@">=17.0.1" from react-native-web@0.17.1
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: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"*" from @react-navigation/native@6.0.10
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 react-native@0.63.2
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/native@6.0.10
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.

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 react@17.0.1 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 react-native-web@0.17.1 that you should npm install react-dom@17.0.1 or a later version.

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

Answer 2

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 react-native-web@0.17.1

Answer 3

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

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

Answer 4

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/config-plugins@4.0.6
  (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/config-plugins@4.0.6
  (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.