如何修复React Native执行npm react-native init时的模块缺失问题？

问题描述 #

执行npm react-native init newApp创建React Native项目时触发错误，提示无法找到模块'./Bundler/util'，已尝试单独安装metro包（npm i metro）但问题仍未解决，想确认是否是缺少其他依赖导致。

报错详情 #

Error: Cannot find module './Bundler/util'
Require stack:
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\metro\src\Assets.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\metro\src\Server.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\metro\src\shared\output\bundle.flow.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\metro\src\shared\output\bundle.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@react-native-community\cli-plugin-metro\build\commands\bundle\buildBundle.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@react-native-community\cli-plugin-metro\build\commands\bundle\bundle.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@react-native-community\cli-plugin-metro\build\commands\bundle\index.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@react-native-community\cli-plugin-metro\build\commands\index.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@react-native-community\cli-plugin-metro\build\index.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@react-native-community\cli\build\commands\index.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@react-native-community\cli\build\index.js
- C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\@react-native-community\cli\build\bin.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)
    at Module._load (node:internal/modules/cjs/loader:885:27)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (C:\Users\kamra\AppData\Local\npm-cache\_npx\7930a8670f922cdb\node_modules\metro\src\Assets.js:14:32)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Module.require (node:internal/modules/cjs/loader:1105:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\metro\\src\\Assets.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\metro\\src\\Server.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\metro\\src\\shared\\output\\bundle.flow.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\metro\\src\\shared\\output\\bundle.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\@react-native-community\\cli-plugin-metro\\build\\commands\\bundle\\buildBundle.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\@react-native-community\\cli-plugin-metro\\build\\commands\\bundle\\bundle.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\@react-native-community\\cli-plugin-metro\\build\\commands\\bundle\\index.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\@react-native-community\\cli-plugin-metro\\build\\commands\\index.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\@react-native-community\\cli-plugin-metro\\build\\index.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\@react-native-community\\cli\\build\\commands\\index.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\@react-native-community\\cli\\build\\index.js',
    'C:\\Users\\kamra\\AppData\\Local\\npm-cache\\_npx\\7930a8670f922cdb\\node_modules\\@react-native-community\\cli\\build\\bin.js'
  ]
}

Node.js v18.13.0

解决方案 #

• 清理npm缓存后重新初始化项目

  npm cache clean --force
  npx react-native init newApp --verbose
  

• 检查Node.js版本兼容性：React Native对Node.js版本有明确要求，当前使用的v18.13.0需对应匹配的RN版本，建议切换至LTS版本（如v16.x或v20.x）后重试
• 安装完整的Metro依赖套件，而非单独安装metro

  npm install metro metro-bundler metro-core metro-react-native-babel-transformer --save-dev
  

• 手动删除本地npm缓存目录：删除C:\Users\kamra\AppData\Local\npm-cache文件夹后，重新执行初始化命令
• 更新react-native-cli至最新版本

  npm install -g @react-native-community/cli
  

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