Metro-bundler 错误：Haste 模块映射中不存在模块`@babel/runtime/helpers/interopRequireDefault`答案

【问题标题】：Metro-bundler error: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module mapMetro-bundler 错误：Haste 模块映射中不存在模块`@babel/runtime/helpers/interopRequireDefault`
【发布时间】：2020-12-18 01:04:50
【问题描述】：

尝试通过 xcode (IOS) 和 metrobundler 运行应用程序，我收到此错误

error: bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `<rootDir>/index.js`: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)
    at ResolutionRequest.resolveDependency (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
    at Object.resolve (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/lib/transformHelpers.js:261:42)
    at dependencies.map.result (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
    at Array.map (<anonymous>)
    at resolveDependencies (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
    at <rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (<rootDir>/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
 BUNDLE  [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

尝试了以下步骤：

清除守望者手表：watchman watch-del-all。
删除node_modules文件夹：rm -rf node_modules && npm install。
重置 Metro Bundler 缓存：rm -rf /tmp/metro-bundler-cache-* 或 npm start -- --reset-cache。
移除急速缓存：rm -rf /tmp/haste-map-react-native-packager-*。

npm 添加@babel/runtime npm 安装

卸载守望者

npm add @babel/runtime --save-dev

在 .watchmanconfig 中添加了 "ignore_dirs": ["node_modules"]

react-native start --reset-cache

似乎没有任何效果。我被这个错误困住了。这是我的系统信息：

react-native-cli: 2.0.1, 反应原生：0.59.9

守望者 --version 4.9.0

"@babel/runtime": "7.0.0", "@babel/cli": "7.5.0", "@babel/core": "7.5.4"

检查的文件：@babel/runtime/helpers/interopRequireDefault 存在于给定位置

【问题讨论】：

标签： ios react-native metro-bundler

【解决方案1】：

您的 Metro-bundler 似乎没有正确查看文件夹。在构建 RN 库时经历了同样的事情，其中 node_modules 文件夹和 package.json 文件与应用程序入口点不在同一级别。尝试将此添加到您的 metro.config.js 文件中（如果没有，则在根目录中创建一个新文件）：

const path = require('path');

module.exports = {
  projectRoot: path.resolve('example'),
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  watchFolders: [path.resolve('node_modules')],
};

example 是您的根目录

【讨论】：