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

Question

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

\n

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

\n

尝试了以下步骤：

\n

---

\n

\n
1. 清晰的守望者手表：watchman watch-del-all.
\n
2. 删除node_modules文件夹：rm -rf node_modules && npm install.
\n
3. 重置 Metro Bundler 缓存：rm -rf /tmp/metro-bundler-cache-*或npm start -- --reset-cache.
\n
4. 删除加速缓存：rm -rf /tmp/haste-map-react-native-packager-*.
\n

\n

---

\n

npm 添加 @babel/runtime\nnpm install

\n

---

\n

卸载看守人

\n

---

\n

npm add @babel/runtime --save-dev

\n

---

\n

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

\n

---

\n

反应本机启动--重置缓存

\n

---

\n

似乎什么都不起作用。我被这个错误困住了。这是我的系统信息：

\n

反应本机-cli：2.0.1，\n反应本机：0.59.9

\n

守望者——版本4.9.0

\n

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

\n

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

\n

Answer 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你的根目录在哪里