pnpm工作区中React Native模块无法解析问题求助

问题背景 #

使用pnpm工作区搭建monorepo，集成React Native移动端应用并依赖共享UI组件包，已按照React Native官方配置开启Metro的符号链接支持，但运行Android模拟器时出现无法解析react-native模块的错误，提示该模块不存在于项目或上级node_modules目录中。

当前配置信息：

Metro配置（metro.config.js） #

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
module.exports = {
  resolver: {
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: true,
        inlineRequires: true,
      },
    }),
  },
};

项目依赖（package.json） #

"dependencies": {
    "@react-native/metro-config": "^0.72.9",
    "react-native-gradle-plugin": "^0.71.19",
    "react-native-webview": "^12.0.2",
    "react-native": "0.72.3"
}

环境信息 #

• Metro版本：0.76.7
• React Native版本：0.72.3

解决方案 #

1. 修复依赖版本不匹配 #

当前react-native-gradle-plugin版本（0.71.19）与React Native版本（0.72.3）不兼容，会导致模块解析和构建异常。将插件版本升级到与RN匹配的0.72.x系列：

"dependencies": {
    "@react-native/metro-config": "^0.72.9",
    "react-native-gradle-plugin": "^0.72.13",
    "react-native-webview": "^12.0.2",
    "react-native": "0.72.3"
}

执行pnpm install重新安装依赖。

2. 调整Metro配置，添加依赖搜索路径 #

由于pnpm monorepo的依赖可能被hoist到根目录，需要在Metro配置中显式指定根node_modules路径，同时建议基于官方默认配置扩展，避免丢失默认规则：

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

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
    // 根据你的项目目录结构，指向根node_modules
    nodeModulesPaths: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, '../../../../node_modules')
    ]
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: true,
        inlineRequires: true,
      },
    }),
  },
});

3. 验证pnpm工作区与依赖安装 #

• 确认根目录的pnpm-workspace.yaml已正确包含RN应用所在目录，例如：

  packages:
    - 'apps/**'
    - 'packages/**'
  

• 执行pnpm ls react-native查看依赖安装位置，确保react-native存在于根或应用自身的node_modules中。

4. 清除缓存并重新构建 #

• 清除Metro缓存：npx metro-cache clean
• 清除Android构建缓存：进入RN应用的android目录，执行./gradlew clean
• 重置Metro服务并重新运行：npx react-native start --reset-cache && npx react-native run-android

5. 确认pnpm符号链接设置 #

检查根目录的.npmrc文件，确保symlink=true（pnpm默认启用，若有修改需恢复）。

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