Expo构建Android项目时npm exited with non-zero code:1错误求助

问题场景 #

基于Firebase开发CRUD应用，使用Expo框架进行React Native开发，执行eas build -p android --profile preview命令时，Prebuild阶段出现npm exited with non-zero code: 1错误，核心原因是styled-components@5.3.6与react@18.1.0、react-dom存在依赖冲突。

完整错误日志 #

- Creating native project directories (./ios and ./android) and updating .gitignore
✔ Created native project | gitignore skipped
- Adding Metro bundler config
✔ Added Metro config
- Updating your package.json scripts, dependencies, and main file
✔ Updated package.json and added index.js entry point for iOS and Android
› Removed "main": "node_modules/expo/AppEntry.js" from package.json because we recommend using index.js as main instead
- Config syncing
[stderr] Using node to generate images. This is much slower than using native packages.
[stderr] › Optionally you can stop the process and try again after successfully running `npm install -g sharp-cli`.
- Config syncing
[stderr] » android: userInterfaceStyle: Install expo-system-ui in your project to enable this feature.
- Config syncing
✔ Config synced
Running "npm install" in the root dir of your repository 
[stderr] npm ERR! code ERESOLVE
[stderr] npm ERR! ERESOLVE could not resolve
[stderr] npm ERR! 
[stderr] npm ERR! While resolving: styled-components@5.3.6
[stderr] npm ERR! Found: react@18.1.0
[stderr] npm ERR! node_modules/react
[stderr] npm ERR!   react@"18.1.0" from the root project
[stderr] npm ERR!   peer react@">=16.3.0" from @callstack/react-theme-provider@3.0.8
[stderr] npm ERR!   node_modules/@callstack/react-theme-provider
[stderr] npm ERR!     @callstack/react-theme-provider@"^3.0.7" from react-native-paper@4.12.5
[stderr] npm ERR!     node_modules/react-native-paper
[stderr] npm ERR!       react-native-paper@"^4.12.5" from the root project
[stderr] npm ERR!       1 more (@react-navigation/material-bottom-tabs)
[stderr] npm ERR!   20 more (@react-native-community/masked-view, ...)
[stderr] npm ERR! 
[stderr] npm ERR! Could not resolve dependency:
[stderr] npm
[stderr] ERR! peer react-dom@">= 16.8.0" from styled-components@5.3.6
[stderr] npm ERR! node_modules/styled-components
[stderr] npm ERR!   styled-components@"^5.3.6" from the root project
[stderr] npm ERR!   peer styled-components@">= 2" from babel-plugin-styled-components@2.0.7
[stderr] npm ERR!   node_modules/babel-plugin-styled-components
[stderr] npm ERR!     babel-plugin-styled-components@">= 1.12.0" from styled-components@5.3.6
[stderr] npm ERR! 
[stderr] npm ERR! Conflicting peer dependency: react@18.2.0
[stderr] npm ERR! node_modules/react
[stderr] npm ERR!   peer react@"^18.2.0" from react-dom@18.2.0
[stderr] npm ERR!   node_modules/react-dom
[stderr] npm ERR!     peer react-dom@">= 16.8.0" from styled-components@5.3.6
[stderr] npm ERR!     node_modules/styled-components
[stderr] npm ERR!       styled-components@"^5.3.6" from the root project
[stderr] npm ERR!       1 more (babel-plugin-styled-components)
[stderr] npm ERR! 
[stderr] npm ERR! Fix the upstream dependency conflict, or retry
[stderr] npm ERR! this command with --force, or --legacy-peer-deps
[stderr] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[stderr] npm ERR! 
[stderr] npm ERR! See /home/expo/.npm/eresolve-report.txt for a full report.
[stderr] npm ERR! A complete log of this run can be found in:
[stderr] npm ERR!     /home/expo/.npm/_logs/2022-11-29T23_23_53_860Z-debug-0.log
npm exited with non-zero code: 1

项目package.json配置 #

{
  "name": "crud---",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "build": "expo build"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/material-bottom-tabs": "^6.2.5",
    "@react-navigation/native": "^6.0.14",
    "@react-navigation/native-stack": "^6.9.2",
    "dotenv": "^16.0.3",
    "expo": "~47.0.8",
    "expo-constants": "^14.0.2",
    "expo-image-picker": "~14.0.2",
    "expo-screen-orientation": "~5.0.1",
    "expo-status-bar": "~1.4.2",
    "firebase": "^9.6.7",
    "formik": "^2.2.9",
    "js-base64": "^3.7.3",
    "lottie-react-native": "^5.1.4",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-image-picker": "^4.7.0",
    "react-native-masked-view": "^0.2.0",
    "react-native-paper": "^4.12.5",
    "react-native-progress": "^5.0.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "^0.18.10",
    "rn-emoji-keyboard": "^1.1.0",
    "styled-components": "^5.3.6",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

解决方法 #

1. 升级React版本至18.2.0 #

冲突根源在于styled-components依赖的react-dom@18.2.0要求react版本为^18.2.0，但当前项目使用的是react@18.1.0。直接升级React版本即可解决：

npm install react@18.2.0

执行完成后，重新运行构建命令。

2. 使用npm兼容参数（临时方案） #

如果暂时不想升级React，可以通过--legacy-peer-deps参数让npm忽略peer依赖冲突，直接执行：

eas build -p android --profile preview --npm-args="--legacy-peer-deps"

或者先在本地安装依赖时添加该参数，再执行构建：

npm install --legacy-peer-deps
eas build -p android --profile preview

3. 升级styled-components至最新稳定版 #

styled-components v6.x对React 18的兼容性更好，同时修复了不少依赖问题。可以尝试升级到最新版（注意v6部分API有变更，需要适配项目代码）：

npm install styled-components@latest

内容的提问来源于stack exchange，提问作者Josue Muñoz Avila