React Native升级Android API31后打包资源遇模块解析错误求助

背景 #

负责维护一个已开发2年的React Native应用，需将Android项目目标API从30升级至31。原以为仅修改Gradle即可，实际遇到诸多问题，尝试升级React Native、Gradle、安装JDK11后仍无法解决，最终重新克隆仓库代码。

已执行步骤 #

• 安装JDK11（此前已完成安装）
• 克隆React Native项目代码
• 执行npm install安装依赖
• 通过Android Studio将Gradle升级至7.3.3

项目依赖版本 #

"dependencies": {
  ...
  "react": "17.0.2",
  "react-native": "0.67.2",
  ...
},
"devDependencies": {
  "@babel/core": "7.12.13",
  "@babel/runtime": "7.12.13",
  "@react-native-community/eslint-config": "1.1.0",
  "babel-jest": "25.5.1",
  "eslint": "6.8.0",
  "jest": "25.5.4",
  "metro-react-native-babel-preset": "0.59.0",
  "react-test-renderer": "16.13.1"
},

当前问题 #

应用可通过react-native run-android命令正常运行，但图片无法加载。执行以下资源打包命令时出现错误：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

错误信息 #

warn Package react-native-vector-icons contains invalid configuration: "dependency.assets" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.
                Welcome to Metro v0.72.3
              Fast - Scalable - Integrated


error Unable to resolve module C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js from C:\DATA\Projects\iDOL\Code\{myappname}\_:

None of these files exist:
  * ..\..\..\..\..\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * ..\..\..\..\..\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js\index(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx).
Error: Unable to resolve module C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js from C:\DATA\Projects\iDOL\Code\{myappname}\_:

None of these files exist:
  * ..\..\..\..\..\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * ..\..\..\..\..\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js\index(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:152:15)
    at ModuleResolver._getEmptyModule (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:50:26)
    at ModuleResolver._getFileResolvedModule (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:219:21)
    at ModuleResolver.resolveDependency (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:148:19)
    at DependencyGraph.resolveDependency (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph.js:264:43)
    at Object.resolve (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\lib\transformHelpers.js:170:21)
    at resolveDependencies (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\DeltaBundler\graphOperations.js:466:33)
    at processModule (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\DeltaBundler\graphOperations.js:232:31)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
info Run CLI with --verbose flag for more details.

疑问 #

1. 项目安装的React Native版本是0.67.2，但打包资源时显示Metro v0.72.3，这是否合理？
2. 文件C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js确实存在，为何会出现模块解析错误？

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