由于依赖关系，无法升级 React-Native 项目答案

【问题标题】：Can't upgrade React-Native project due dependencies由于依赖关系，无法升级 React-Native 项目
【发布时间】：2021-03-11 03:43:59
【问题描述】：

我正在尝试将我的 RN 项目从 0.62.2 更新到最新版本（当前为 0.63.3）。我只是运行npm update 并得到错误：

npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.13.1" from react-native@0.63.3
npm ERR! node_modules/react-native
npm ERR!   react-native@"^0.63.3" 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 update 之前，我运行了 npx npm-check-updates -u 并得到以下结果：

 @react-native-community/netinfo          ^5.9.5  →   ^5.9.9     
 @react-navigation/drawer                 ^5.8.6  →  ^5.11.4     
 @react-navigation/native                 ^5.7.1  →  ^5.8.10     
 @react-navigation/stack                  ^5.7.1  →  ^5.12.8     
 @types/react                           ^16.9.43  →  ^17.0.0     
 amazon-cognito-identity-js               ^3.3.3  →   ^4.5.5     
 aws-amplify                             ^3.0.21  →  ^3.3.10     
 axios                                   ^0.19.2  →  ^0.21.0     
 graphql                                 ^0.11.7  →  ^15.4.0     
 graphql-tag                             ^2.10.4  →  ^2.11.0     
 moment-timezone                         ^0.5.31  →  ^0.5.32     
 react                                  ^16.11.0  →  ^17.0.1     
 react-native                            ^0.62.2  →  ^0.63.3     
 react-native-base64                       0.0.2  →    0.1.0     
 react-native-gesture-handler             ~1.5.0  →   ~1.9.0     
 react-native-reanimated                  ~1.4.0  →  ~1.13.2     
 react-native-safe-area-context           ^0.7.3  →   ^3.1.9     
 react-native-screens             2.0.0-alpha.12  →   2.15.0     
 react-native-simple-crypto              ^0.2.13  →  ^0.2.15     
 react-native-vector-icons                ^6.7.0  →   ^7.1.0     
 react-navigation                         ^4.4.0  →   ^4.4.3     
 @babel/core                               7.8.7  →   7.12.9     
 @babel/runtime                            7.8.7  →   7.12.5     
 babel-jest                               24.9.0  →   26.6.3     
 metro-react-native-babel-preset          0.56.4  →   0.64.0     
 react-test-renderer                      16.9.0  →   17.0.1

好的，我从错误中总结出react@^17.0.1 对需要react@16.13.1 的react-native@0.63.3 是错误的，但这是由npx npm-check-updates -u 产生的——为什么它会导致不兼容的deps 树？..

如果我将手动响应版本更改为“^16.0.0”，npm install 将失败并显示：

npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR!   react@"^16.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.13.1" from react-native@0.63.3
npm ERR! node_modules/react-native
npm ERR!   react-native@"^0.63.3" from the root project

为什么是“react@16.14.0”？！从哪里来？

我只是无法理解这一切是如何运作的。请建议。

我现在的package.json：

{
  "name": "Proj",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^5.9.9",
    "@react-navigation/drawer": "^5.11.4",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "@types/react": "^17.0.0",
    "amazon-cognito-identity-js": "^4.5.5",
    "aws-amplify": "^3.3.10",
    "axios": "^0.21.0",
    "graphql": "^15.4.0",
    "graphql-tag": "^2.11.0",
    "i18n-js": "^3.8.0",
    "moment-timezone": "^0.5.32",
    "react": "^16.0.0",
    "react-native": "^0.63.3",
    "react-native-avatar-social": "0.0.3",
    "react-native-base64": "0.1.0",
    "react-native-gesture-handler": "~1.9.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^2.0.1",
    "react-native-reanimated": "~1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "2.15.0",
    "react-native-simple-crypto": "^0.2.15",
    "react-native-tab-view": "^2.15.2",
    "react-native-tab-view-viewpager-adapter": "^1.1.0",
    "react-native-uuid-generator": "^6.1.1",
    "react-native-vector-icons": "^7.1.0",
    "react-native-video": "^4.4.5",
    "react-native-viewpager": "^0.2.13",
    "react-native-zeroconf": "github:atlascoder/react-native-zeroconf",
    "react-navigation": "^4.4.3",
    "rn-fetch-blob": "^0.12.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.9",
    "@babel/runtime": "7.12.5",
    "babel-jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

更新

根据@anthony-marino 的建议，我通过update helper 手动更新了依赖项，然后我回到了促使我升级的问题！！

npm ERR! Found: react@16.13.1
npm ERR! node_modules/react
npm ERR!   react@"16.13.1" from the root project
npm ERR!   peer react@"^16.0" from @react-native-community/viewpager@4.2.1
npm ERR!   node_modules/@react-native-community/viewpager
npm ERR!     peer @react-native-community/viewpager@"*" from react-native-tab-view-viewpager-adapter@1.1.0
npm ERR!     node_modules/react-native-tab-view-viewpager-adapter
npm ERR!       react-native-tab-view-viewpager-adapter@"^1.1.0" from the root project
npm ERR!   15 more (@react-navigation/core, @react-navigation/drawer, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.11.0" from react-native-zeroconf@0.12.3
npm ERR! node_modules/react-native-zeroconf
npm ERR!   react-native-zeroconf@"github:atlascoder/react-native-zeroconf" from the root project
npm ERR!

还有让我筋疲力尽的事情..

我有一个组件 from @react-native-community/viewpager，为什么它需要 peerDep react@"^16.0" - 为什么它不接受 react@16.13.1。 ^16.0 意味着比16.* 更新鲜，不是吗？！当我在npm semver calculator 上检查^16.0 - 它显示我16.13.1 合适..

解决方法

关于更新时遇到这个问题：

删除node_modules和package-lock.json
npm i
当npm i 失败时 - 删除失败的依赖项
完成npm i 后 - 手动安装已移除的依赖项

【问题讨论】：

标签： react-native npm

【解决方案1】：

从您的日志中：react-native 0.63.3 需要 react@"16.13.1"，但找到了 react@"^17.0.1"。只需通过npm install react@16.13.1 降级您的反应并再次尝试npm install。它应该可以正常工作。如果你运行 npm outdated 你会看到“react”已经过时了。但是您不太可能将所有软件包都安装在最新版本中。

【讨论】：

【解决方案2】：

所以当我从 RN 0.63.1 迁移到 0.64.1 时，我也遇到了这个问题，所以我以这种方式解决了它：

Step run npx react-native upgrade 对我来说更新了 react 和 react-native
然后我手动更新了这些依赖项：

"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1"

您可以使用此工具查看这些命令 npx react-native upgrade 做了哪些更改，以及您必须手动进行哪些更改 https://react-native-community.github.io/upgrade-helper/?from=0.63.1&to=0.64.1

然后运行npm install --force 以使用您手动添加的新依赖项更新package-lock.json。如果您可能使用 Jest 进行了测试，那么您还必须调整一些东西，然后转到 jest.configs.js 并确保您在这里也有 react-native 和 @react-native

transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community)',
  ],

可能你也会对这些模拟有一些问题

// The old way
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
// Here path was updated
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

现在您应该可以开始了，此示例用于将 RN 从 0.63.1 升级到 0.64.1，但它也适用于您。

p.s 我使用的是node -v 14.15.4 和npm -v 7.7.6，如果你使用的是 npm v6，问题可能会更少

【讨论】：

【解决方案3】：

这解决了我的问题。

npm install @react-native-community/masked-view --force

【讨论】：