React Native项目使用本地包失败：无法解析@babel/runtime模块

问题说明 #

执行npm i /path-to-folder安装本地包后，出现模块解析错误：

Unable to resolve module @babel/runtime/helpers/interopRequireDefault

本地包package.json相关配置：

{
  ...
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/runtime": "^7.19.4",
    "react": "^18.1.0",
    "react-native": "^0.70.1",
    "react-native-svg": "^13.2.0"
  }
}

项目metro-config.js相关配置：

resolver: {
  nodeModulesPaths: [packagePath],
},
watchFolders: [packagePath],

解决方案 #

1. 调整本地包依赖声明 #

把本地包package.json中devDependencies里的@babel/runtime移到dependencies中——开发依赖不会被主项目识别，修改后配置如下：

{
  ...
  "dependencies": {
    "@babel/runtime": "^7.19.4"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "react": "^18.1.0",
    "react-native": "^0.70.1",
    "react-native-svg": "^13.2.0"
  }
}

2. 修复Metro配置 #

当前nodeModulesPaths仅指向本地包路径，导致主项目无法读取自身node_modules中的依赖，需补充主项目的依赖路径：

const path = require('path');
const projectRoot = __dirname;
const packagePath = '/path-to-folder'; // 替换为你的本地包实际路径

module.exports = {
  resolver: {
    nodeModulesPaths: [
      path.join(projectRoot, 'node_modules'),
      path.join(packagePath, 'node_modules')
    ],
  },
  watchFolders: [packagePath],
};

3. 清理缓存并重启服务 #

执行命令清除Metro缓存，再重启开发服务：

npx react-native start --reset-cache

4. 重新安装依赖 #

进入本地包目录重新安装依赖，再回到主项目重新安装本地包：

cd /path-to-folder
npm install
cd ../主项目目录
npm install /path-to-folder

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