React Native 0.73.4绝对路径导入失效问题求助

问题概述 #

升级到React Native 0.73.4后，绝对路径导入功能失效，但仅在执行react-native bundle命令时出现问题，完整构建（如react-native run-ios/android）时正常。尝试过开启metro.config.js中的enableGlobalPackages选项但未解决问题，也了解到Yarn workspaces是另一种方案，但更倾向于通过全局包配置解决。

针对react-native bundle场景的有效解决方案 #

1. 手动配置metro的模块解析路径 #

修改metro.config.js，通过extraNodeModules和watchFolders强制metro在bundle时正确识别全局/项目依赖：

const path = require('path');

const config = {
  resolver: {
    enableGlobalPackages: true,
    // 手动映射模块到项目node_modules，避免bundle时解析失败
    extraNodeModules: new Proxy({}, {
      get: (target, moduleName) => path.join(process.cwd(), `node_modules/${moduleName}`),
    }),
  },
  // 添加监听文件夹，确保metro能检测到依赖变化
  watchFolders: [
    path.resolve(__dirname, './node_modules'),
    // 如果使用全局安装的包，添加全局node_modules路径（可通过`npm root -g`获取）
    // path.resolve('/your/global/node_modules/path'),
  ],
  // 保留其他原有配置
};

module.exports = config;

2. 修正react-native bundle命令参数 #

执行bundle命令时，明确指定项目根目录和入口文件，避免路径解析错误：

# 基础示例（iOS）
react-native bundle --platform ios --entry-file index.js --bundle-output ios/main.jsbundle --dev false --assets-dest ios

# 若为monorepo或非标准项目结构，添加--project-root指定根目录
react-native bundle --project-root ./ --platform ios --entry-file index.js --bundle-output ios/main.jsbundle --dev false --assets-dest ios

3. 清除metro缓存 #

缓存可能导致新配置不生效，先重置缓存再执行bundle：

npx react-native start --reset-cache
# 之后重新运行bundle命令

4. 验证全局包路径配置 #

• 执行npm root -g（npm）或yarn global dir（Yarn）获取全局包安装路径
• 将该路径添加到metro.config.js的watchFolders数组中，确保metro能扫描到全局包
• 检查metro配置中enableGlobalPackages是否被其他配置项覆盖，确保没有被设为false

额外提示 #

如果是monorepo项目，除上述配置外，需确保子包的package.json中正确声明了依赖，避免metro跨包解析时出现路径错误。

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