Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` – without changing anything

React Native version:

System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 1.99 GB / 31.28 GB
    Shell: 5.5.1 - /usr/bin/zsh
  Binaries:
    Node: 13.2.0 - ~/.nvm/versions/node/v13.2.0/bin/node
    Yarn: 1.19.2 - ~/.nvm/versions/node/v13.2.0/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v13.2.0/bin/npm
    Watchman: 4.9.0 - /home/linuxbrew/.linuxbrew/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3
      System Images: android-28 | Google APIs Intel x86 Atom
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

I opened a project that I’ve been working on for a few weeks, and I decided to run it after not having touched it for a few days:

1. Run npx react-native start
2. Run npx react-native run-android

I expected the project to start in Android. Instead, I got:

Looking for JS files in
   /foo 

Loading dependency graph, done.
 BUNDLE  [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)::ffff:127.0.0.1 - - [08/Jan/2020:16:10:27 +0000] "GET /index.bundle?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
error: bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `index.js`: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (/foo/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (/foo/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/foo/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
    at Object.resolve (/foo/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /foo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:426:31
    at Array.map (<anonymous>)
    at resolveDependencies (/foo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:423:18)
    at /foo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/foo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
 BUNDLE  [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

Of course, the file exists:

ls -l node_modules/@babel/runtime/helpers/interopRequireDefault.js
-rw-r--r-- 1 werner werner 147 Oct 26  1985 node_modules/@babel/runtime/helpers/interopRequireDefault.js

So I don’t know why it wouldn’t find it. Note that I have not changed anything in the project, and even reverting to an old commit from a few weeks ago does not solve this problem.

A colleague of mine has exactly the same project and can run it without problems. I have even tried to run a copy of his directory including the downloaded node_modules folder, and it fails.

I could also reproduce this on a fresh install of NVM and Node under macOS.

I could not reproduce this in a completely new RN project. But cloning my project into another folder and running npm install, the error persists.

Trying the following did not work:

watchman watch-del-all
rm -rf node_modules
rm -rf /tmp/metro-*
npm add @babel/runtime
npm i
npx react-native start --reset-cache

This is the package.json:

{
  "name": "foo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "async": "^2.1.2",
    "base-64": "^0.1.0",
    "body-parser": "^1.15.2",
    "colors": "^1.1.2",
    "cors": "^2.8.1",
    "crypto-js": "^3.1.5",
    "express": "^4.14.0",
    "localforage": "^1.4.3",
    "pako": "^1.0.3",
    "pem": "^1.8.3",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-progress": "^4.0.2",
    "react-native-reanimated": "^1.4.0",
    "react-native-simple-gauge": "^0.2.2",
    "react-native-video": "^5.0.2",
    "react-native-video-controls": "^2.2.3",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3",
    "rest": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/runtime": "^7.7.7",
    "@react-native-community/eslint-config": "^0.0.6",
    "@react-native-community/eslint-plugin": "^1.0.0",
    "babel-jest": "^24.9.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-plugin-prettier": "^3.1.2",
    "jest": "^24.9.0",
    "license-checker": "^25.0.1",
    "metro-react-native-babel-preset": "^0.56.4",
    "reactotron-react-native": "^4.0.2"
  },
  "jest": {
    "preset": "react-native"
  },
}

I have seen:

• https://github.com/facebook/react-native/issues/21310
• https://stackoverflow.com/questions/52486219/unable-to-resolve-module-babel-runtime-helpers-interoprequiredefault
• https://stackoverflow.com/questions/52686952/module-babel-runtime-helpers-interoprequiredefault-does-not-exist-in-the-hast/55676212
• https://stackoverflow.com/questions/58989571/react-native-unable-to-resolve-module-babel-runtime-helpers-interoprequirede

but none of the solutions there worked for me.

[KEMBL]

as was mentioned above, looks like the presence of this property watchFolders: [${__dirname}/../..], in metro.config.js solves the problem. I have a monorepo and mobile app is one of packages, that is why I need ../..

BTW in my case, interopRequireDefault problem appears only when I make a release build with

react-native run-android --variant release

developing mode ( react-native run-android ) works fine even without metro.config.js file Also, there is no problem if a project is not configured as Monorepo

---

npmPackages: @react-native-community/cli: Not Found react: 16.14.0 => 16.14.0 react-native: 0.63.3 => 0.63.3 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

[GenericJam]

rm -rf /tmp/metro-* worked for me.

This is the last suggestion of the message to try these things:

1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro’s cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*