Windows下React Native安卓项目ERESOLVE依赖树解析错误求解

问题成因 #

1. 依赖版本不匹配：项目package.json中声明的react@^16.0.4与react-native 0.64.2要求的react@17.0.1版本不一致，解析时自动拉取了17.0.1版本，产生基础版本冲突。
2. 第三方包peer依赖冲突：@react-native-community/slider@4.1.7包含对react-native-windows的可选peer依赖，对应版本的react-native-windows要求react@17.0.2，与项目使用的react版本不兼容，npm v7+默认开启严格peer依赖校验，直接触发ERESOLVE错误。
3. 源配置问题：替换jcenter时若未配置正确可用的maven源，会叠加安卓构建阶段的资源拉取失败问题。

相关错误截图 #

• 删除node_modules后依赖解析报错：
  
• 执行构建流程后报错：
  

参考日志与配置 #

debug日志

# npm resolution error report

While resolving: AwesomeProject@0.0.1
Found: react@17.0.1
node_modules/react
  react@"^17.0.1" from the root project
  peer react@"*" from @react-native-community/slider@4.1.7
  node_modules/@react-native-community/slider
    @react-native-community/slider@"^4.1.7" from the root project
  peer react@"17.0.1" from react-native@0.64.2
  node_modules/react-native
    react-native@"^0.64.2" from the root project
    peer react-native@"*" from @react-native-community/slider@4.1.7
    node_modules/@react-native-community/slider
      @react-native-community/slider@"^4.1.7" from the root project

Could not resolve dependency:
peer react@"17.0.2" from react-native-windows@0.65.3
node_modules/react-native-windows
  peer react-native-windows@"*" from @react-native-community/slider@4.1.7
  node_modules/@react-native-community/slider
    @react-native-community/slider@"^4.1.7" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "react",
    "version": "17.0.1",
    "whileInstalling": {
      "name": "AwesomeProject",
      "version": "0.0.1",
      "path": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
    },
    "location": "node_modules/react",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "react",
        "spec": "^17.0.1",
        "from": {
          "location": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
        }
      },
      {
        "type": "peer",
        "name": "react",
        "spec": "*",
        "from": {
          "name": "@react-native-community/slider",
          "version": "4.1.7",
          "whileInstalling": {
            "name": "AwesomeProject",
            "version": "0.0.1",
            "path": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
          },
          "location": "node_modules/@react-native-community/slider",
          "isWorkspace": false,
          "dependents": [
            {
              "type": "prod",
              "name": "@react-native-community/slider",
              "spec": "^4.1.7",
              "from": {
                "location": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
              }
            }
          ]
        }
      },
      {
        "type": "peer",
        "name": "react",
        "spec": "17.0.1",
        "from": {
          "name": "react-native",
          "version": "0.64.2",
          "whileInstalling": {
            "name": "AwesomeProject",
            "version": "0.0.1",
            "path": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
          },
          "location": "node_modules/react-native",
          "isWorkspace": false,
          "dependents": [
            {
              "type": "prod",
              "name": "react-native",
              "spec": "^0.64.2",
              "from": {
                "location": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
              }
            },
            {
              "type": "peer",
              "name": "react-native",
              "spec": "*",
              "from": {
                "name": "@react-native-community/slider",
                "version": "4.1.7",
                "whileInstalling": {
                  "name": "AwesomeProject",
                  "version": "0.0.1",
                  "path": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
                },
                "location": "node_modules/@react-native-community/slider",
                "isWorkspace": false,
                "dependents": [
                  {
                    "type": "prod",
                    "name": "@react-native-community/slider",
                    "spec": "^4.1.7",
                    "from": {
                      "location": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "react",
    "spec": "^17.0.1",
    "from": {
      "location": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
    }
  },
  "edge": {
    "type": "peer",
    "name": "react",
    "spec": "17.0.2",
    "error": "INVALID",
    "from": {
      "name": "react-native-windows",
      "version": "0.65.3",
      "whileInstalling": {
        "name": "AwesomeProject",
        "version": "0.0.1",
        "path": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
      },
      "location": "node_modules/react-native-windows",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "peer",
          "name": "react-native-windows",
          "spec": "*",
          "from": {
            "name": "@react-native-community/slider",
            "version": "4.1.7",
            "whileInstalling": {
              "name": "AwesomeProject",
              "version": "0.0.1",
              "path": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
            },
            "location": "node_modules/@react-native-community/slider",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@react-native-community/slider",
                "spec": "^4.1.7",
                "from": {
                  "location": "C:\\Users\\pascal\\Desktop\\AwesomeProject2"
                }
              }
            ]
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

项目package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/slider": "^4.1.7",
    "@react-native-masked-view/masked-view": "^0.2.4",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/material-bottom-tabs": "^5.3.15",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "axios": "^0.21.1",
    "formik": "^2.2.9",
    "npm": "^7.15.1",
    "react": "^16.0.4",
    "react-dom": "^16.0.4",
    "react-native": "^0.64.2",
    "react-native-awesome-alerts": "^1.5.2",
    "react-native-base64": "^0.2.1",
    "react-native-camera": "^3.44.1",
    "react-native-color": "^0.0.10",
    "react-native-config": "^1.4.2",
    "react-native-flash-message": "^0.1.23",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-image-crop-picker": "^0.36.2",
    "react-native-in-app-message": "^1.0.32",
    "react-native-modal": "^12.0.3",
    "react-native-paper": "^4.9.2",
    "react-native-permissions": "^2.2.2",
    "react-native-qrcode-generator": "^1.2.2",
    "react-native-qrcode-scanner": "^1.5.4",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-webview": "^11.6.4",
    "realm": "^10.6.0",
    "rn-fetch-blob": "^0.12.0",
    "styled-components": "^5.3.0",
    "yarn": "^1.22.10",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/runtime": "^7.14.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^27.0.2",
    "eslint": "^7.28.0",
    "jest": "^27.0.4",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-test-renderer": "16.0.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

具体解决步骤 #

1. 修复依赖树冲突，二选一即可 #

方案A：快速绕过校验（仅开发安卓/ios无需windows端推荐）

删除node_modules目录、package-lock.json或yarn.lock文件后，执行对应安装命令：

• 使用npm：

npm install --legacy-peer-deps

• 使用yarn：

yarn install --ignore-peer-deps

该方案仅跳过严格依赖校验，不会修改现有依赖版本，react-native-windows的依赖要求不会影响非windows端的正常运行。

方案B：版本对齐彻底解决

修改package.json中的三个依赖版本，与react-native 0.64.2的要求对齐：

"react": "17.0.1",
"react-dom": "17.0.1",
"react-test-renderer": "17.0.1"

随后安装兼容版本的slider包：

npm install @react-native-community/slider@4.1.6 --save

删除锁文件和node_modules目录后，正常执行npm install或yarn install即可。

2. 修复安卓构建源配置 #

打开android/build.gradle文件，修改allprojects -> repositories配置，替换废弃的jcenter，使用国内镜像加速拉取：

allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        google()
        mavenCentral()
        maven { url("$rootDir/../node_modules/react-native/android") }
        maven { url("$rootDir/../node_modules/jsc-android/dist") }
    }
}

3. 重新构建项目 #

依次执行以下命令：

cd android
./gradlew clean
cd ..
npx react-native run-android

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