React Native 0.66.3 Hermes引擎报TypeError Metro相关ENOENT错误如何解决

错误根因 #

你遇到的报错核心是Metro打包服务在符号化错误栈阶段，错误将本地项目路径和Bundle的HTTP请求地址拼接，导致尝试读取不存在的本地文件，属于RN 0.66.x版本偶发的Metro路径解析异常，多由环境缓存变动、代理配置劫持触发。

定位步骤 #

• 先排查近期环境变更：是否升级过Node版本、修改过系统hosts、开启过网络代理工具、安装过全局RN相关依赖
• 查看Metro服务启动日志，确认是否存在请求路径被篡改的异常记录

修复方案 #

方案1：全量清理缓存（90%场景可直接解决） #

按顺序执行以下命令清理所有缓存：

# 清理watchman文件监控缓存
watchman watch-del-all
# 删除项目依赖及锁文件
rm -rf node_modules yarn.lock package-lock.json
# 重新安装依赖
npm install
# 清理全局Metro临时缓存
rm -rf /tmp/metro-*
# 清理Xcode构建缓存
rm -rf ~/Library/Developer/Xcode/DerivedData
cd ios && xcodebuild clean && cd ..

清理完成后重启Metro服务：

npx react-native start --reset-cache

新开终端重新启动iOS应用即可：

npx react-native run-ios

方案2：修复Metro路径解析配置（缓存清理无效时使用） #

如果清理缓存后问题仍然存在，在项目根目录的metro.config.js中新增路径拦截配置，强制修正错误拼接的请求路径：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig();
  return {
    ...defaultConfig,
    // 保留你原有配置的基础上新增server配置
    server: {
      enhanceMiddleware: (middleware) => {
        return (req, res, next) => {
          // 修正错误拼接的HTTP路径
          if (req.url?.startsWith('/http:/')) {
            req.url = req.url.replace('/http:/', 'http://');
          }
          if (req.url?.startsWith('/https:/')) {
            req.url = req.url.replace('/https:/', 'https://');
          }
          return middleware(req, res, next);
        };
      },
    },
  };
})();

额外检查项 #

如果使用了Charles、Clash等网络代理工具，将localhost、127.0.0.1加入代理白名单，避免本地调试请求被代理劫持导致路径异常。 #

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