React Native 0.70.3升级后Metro出现undefined重复依赖键报错调试

问题描述 #

将 React Native 从 0.69.5 升级到 0.70.3 后，双平台构建可正常完成，但运行 Metro 时触发以下报错：
error: Error: resolveDependencies: Found duplicate dependency key 'undefined' in /Users/LA/Repo/sb-app/index.js

完整报错栈：

error: Error: resolveDependencies: Found duplicate dependency key 'undefined' in /Users/LA/Repo/sb-app/index.js
    at resolveDependencies (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/graphOperations.js:484:13)
    at processModule (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/graphOperations.js:232:31)
    at async traverseDependenciesForSingleFile (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/graphOperations.js:221:3)
    at async Promise.all (index 0)
    at async initialTraverseDependencies (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/graphOperations.js:204:3)
    at async DeltaCalculator._getChangedDependencies (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:208:25)
    at async DeltaCalculator.getDelta (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:90:16)
    at async DeltaBundler.buildGraph (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler.js:56:5)
    at async IncrementalBundler.buildGraphForEntries (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/IncrementalBundler.js:81:19)
    at async IncrementalBundler.buildGraph (/Users/LA/Repo/sb-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/IncrementalBundler.js:161:19)

已确认 index.js 和 app.tsx 无重复依赖，报错栈指向的 graphOperations.js 仅包含抛出语句，推测错误由上游模块触发。

调试方法 #

• 临时修改 Metro 源码加日志定位
  找到报错的 graphOperations.js 文件（路径：node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/graphOperations.js），在第484行报错语句前添加日志，打印当前处理的依赖项：

  // 在抛出错误前插入
  console.log('当前处理的依赖集合:', dependencies);
  console.log('生成undefined键的依赖:', Object.values(dependencies).filter(item => !item.key));
  

  重启 Metro，根据日志找到生成 undefined 键的具体依赖模块，定位引入源头。

• 排查第三方库依赖冲突
  升级后部分第三方库可能未适配 RN 0.70.x，执行命令去重依赖：

  # yarn 用户
  npx yarn-deduplicate && yarn install
  # npm 用户
  npx npm-deduplicate && npm install
  

  检查 package-lock.json 或 yarn.lock，重点关注 metro、metro-resolver、@react-native-community/cli 系列包是否存在多版本重复引入。

• 验证 Metro 配置正确性
  检查 metro.config.js 的 resolver 配置：

  • 移除可能导致路径解析异常的 extraNodeModules 自定义配置
  • 确保 resolverMainFields 符合 RN 0.70.x 默认值：['react-native', 'browser', 'main']
  • 重置 Metro 缓存：

    npx react-native start --reset-cache
    

• 逐步排查模块引入
  临时注释 index.js 中除 RN 核心初始化外的所有引入，逐一恢复并重启 Metro，定位触发报错的具体模块。若为第三方库问题，尝试升级该库至适配 RN 0.70.x 的版本，或临时替换替代方案。

• 检查 TypeScript 配置（若使用）
  确认 tsconfig.json 中的 baseUrl、paths 配置无路径解析错误，执行命令检查 TypeScript 编译问题：

  tsc --noEmit
  

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