Metro打包报错@react-native/normalize-color模块无法解析如何解决

错误核心表现 #

执行Metro打包构建时抛出异常：尝试从项目路径下的node_modules/deprecated-react-native-prop-types/DeprecatedColorPropType.js解析@react-native/normalize-color模块时，已成功定位到node_modules/@react-native/normalize-color/package.json文件，但该包main字段声明的入口路径node_modules/@react-native/normalize-color/index不存在有效匹配文件，构建中断。

排查解决步骤 #

按优先级从高到低操作即可：

• 清理缓存并重装依赖
  这类问题绝大多数是依赖安装时网络波动、本地缓存损坏导致包文件残缺，直接执行以下命令重置环境：

  # 删除现有依赖和锁文件
  rm -rf node_modules yarn.lock package-lock.json pnpm-lock.yaml
  # 按你使用的包管理器重新安装依赖，例：npm install / yarn install / pnpm install
  # 启动Metro时强制清除缓存
  npx react-native start --reset-cache
  

  执行完先验证打包是否恢复，正常的话不用走后续步骤。

• 修复依赖版本不匹配问题
  如果重装后依然报错，就是版本依赖冲突：

  1. 先进入node_modules/@react-native/normalize-color/目录，查看实际存在的入口文件位置，确认是包版本不对还是入口字段配置错误
  2. React Native 0.70+版本直接安装匹配的稳定版normalize-color包即可：

     # npm用户
     npm install @react-native/normalize-color@2.1.0 --save
     # yarn用户执行 yarn add @react-native/normalize-color@2.1.0
     # pnpm用户执行 pnpm add @react-native/normalize-color@2.1.0
     

  3. 如果是第三方老依赖强制拉了不兼容的版本，在package.json里加字段强制锁版本：
     • npm 8.3+版本加overrides配置
     • yarn/pnpm加resolutions配置
       配置示例：

     {
       "overrides": {
         "@react-native/normalize-color": "2.1.0"
       },
       "resolutions": {
         "@react-native/normalize-color": "2.1.0"
       }
     }
     

     改完重新执行依赖安装，再清Metro缓存启动即可。

• 应急临时修复
  如果需要紧急出包来不及调整依赖，直接手动修改node_modules/@react-native/normalize-color/package.json里的main字段，改成你在目录里实际看到的入口文件路径（比如很多版本实际入口在dist/index.js，就把main字段值改成dist/index.js）。注意这个方法重装依赖就会失效，仅作临时应急用。

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