React Native 0.75.4项目报错：无法解析@babel/runtime相关模块

环境与项目信息 #

• React Native 版本：0.75.4
• 创建命令：npx @react-native-community/cli@latest init projectname
• 系统环境：
  • Node：22.9.0
  • macOS：Sequoia 15.0
  • Watchman：2024.10.14.00
  • OpenJDK：17.0.12 LTS

项目依赖配置 #

"dependencies": {
    "@babel/runtime": "^7.25.7",
    "react": "18.3.1",
    "react-native": "0.75.4"
},
"devDependencies": {
    "@babel/core": "^7.25.8",
    "@babel/preset-env": "^7.25.8",
    "@react-native/babel-preset": "0.75.4",
    "@react-native/eslint-config": "0.75.4",
    "@react-native/metro-config": "0.75.4",
    "@react-native/typescript-config": "0.75.4",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
}

已尝试无效操作 #

• 删除并重新安装node_modules
• 执行npm run start --reset-cache
• 执行npm install --save @babel/runtime
• 停止watchman服务
• 切换使用yarn
• 将@babel/runtime在生产/开发依赖间切换安装

针对性排查方案 #

1. 锁定 Babel 依赖版本与 RN 官方一致 #

React Native 0.75.4 官方配套的 @babel/runtime 版本为 7.24.7，当前使用的7.25.7版本过高，易与RN内置babel预设产生兼容性问题。执行以下命令安装指定版本：

npm install @babel/runtime@7.24.7 --save-exact

同步调整@babel/core和@babel/preset-env到RN推荐版本：

npm install @babel/core@7.24.7 @babel/preset-env@7.24.7 --save-dev --save-exact

2. 检查 Metro 配置是否冲突 #

确保项目根目录的metro.config.js未覆盖RN默认配置，保持基础配置如下：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

3. 清除全局与系统级缓存 #

除项目缓存外，清除npm全局缓存和系统临时缓存：

npm cache clean --force
rm -rf ~/.npm/_npx
rm -rf $TMPDIR/metro-*
rm -rf $TMPDIR/haste-map-*

4. 切换到兼容的 Node 版本 #

Node 22.x 属于较新版本，RN 0.75.4 官方推荐使用18.x 或 20.x LTS版本。通过nvm切换版本：

# 安装nvm（未安装时执行）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 安装Node 20 LTS
nvm install 20 --lts
# 切换到Node 20
nvm use 20

5. 重置原生项目依赖 #

• iOS：进入ios目录执行：

  pod deintegrate && pod install
  

• Android：进入android目录执行：

  ./gradlew clean
  

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