npm安装react-navigation报ERESOLVE peer dependency冲突错误

执行npm install @react-navigation/native @react-navigation/native-stack命令安装React Navigation导航库依赖时，触发依赖解析失败，首次报错信息如下：

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

项目初始配置 #

出问题时项目的package.json配置如下：

{
  "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
}

自行排查触发的二次报错 #

最初尝试直接升级react版本，同步升级react-dom，执行npm i react@latest react-dom@latest后重新运行导航依赖安装命令，触发新的依赖解析错误，报错信息如下：

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.

• 项目基于Expo SDK 42搭建，该版本强绑定React 16.13.1、React Native 0.63.2版本，单独升级React版本会直接和内置React Native的peer依赖要求冲突
• 最新版@react-navigation/native-stack依赖的react-native-screens、react-freeze，以及项目中安装的react-native-web@0.17.1都要求React版本≥17.0.1，和Expo SDK 42自带的React 16.13.1版本不兼容
• 直接把React升级到最新的18.2.0后，不符合Expo SDK 42内置React Native 0.63.2要求的React 16.13.1版本约束，触发二次报错

提供两种可直接落地的修复方案，根据项目需求选择即可。

方案1：保留现有Expo SDK 42版本（改动最小，适合不想大改现有项目的场景） #

• 第一步：回退误升级的React相关依赖到SDK 42匹配版本，执行命令：
  npm install react@16.13.1 react-dom@16.13.1
• 第二步：降级react-native-web到适配React 16的版本，替换掉要求React≥17的0.17.1版本，执行命令：
  npm install react-native-web@0.16.5
• 第三步：安装和Expo SDK 42兼容的React Navigation及配套依赖版本，不要直接装最新版，执行命令：
  npm install @react-navigation/native@6.0.10 @react-navigation/native-stack@6.5.0 react-native-screens@3.4.0 react-native-safe-area-context@3.2.0 --legacy-peer-deps
  追加--legacy-peer-deps参数是为了沿用npm v6的依赖解析逻辑，不会因为非核心的peer依赖版本警告阻断安装流程，不会影响项目正常运行。

方案2：升级Expo SDK版本（长期维护推荐，无版本兼容包袱） #

• 第一步：清理现有错误依赖，删除项目根目录下的node_modules文件夹和package-lock.json文件
• 第二步：修改package.json中的核心依赖版本，升级到Expo SDK 48配套版本（该版本原生支持React 18，完全兼容最新版React Navigation），需要修改的字段如下：

  "dependencies": {
    "axios": "^0.21.4",
    "expo": "~48.0.0",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-select-dropdown": "^3.3.0",
    "react-native-web": "0.18.12"
  }
  

• 第三步：执行npm install安装全量基础依赖，安装完成后再执行npm install @react-navigation/native @react-navigation/native-stack安装导航库，不会再出现版本冲突报错。

注意：Expo项目的核心依赖（react、react-native、react-native-web）版本和SDK版本是强绑定的，不要脱离SDK版本要求单独升级这类核心包，否则大概率出现依赖冲突甚至项目无法启动的问题。

内容的提问来源于stack exchange，提问作者GameOn_Jon