Metro-bundler error: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map

Question

Trying to run the app through xcode (IOS) and metrobundler, I am getting this error

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.

Tried the steps:

---

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-*.

---

npm add @babel/runtime npm install

---

Uninstalling watchman

---

npm add @babel/runtime --save-dev

---

Added "ignore_dirs": ["node_modules"] in .watchmanconfig

---

react-native start --reset-cache

---

Nothing seems to work. And I am stuck with this error. This is my system info:

react-native-cli: 2.0.1, react-native: 0.59.9

watchman --version 4.9.0

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

Checked file: @babel/runtime/helpers/interopRequireDefault which is present at the given location

Answer 1

Looks like your metro-bundler is not watching the folders correctly. Went through the same while building a RN library, where the node_modules folder and package.json file weren't on the same level as the app entry point. Try adding this to your metro.config.js file (or create a new file in the root if you don't have it):

const path = require('path');

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

where example is your rootDir