react-native: 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:

but none of the solutions there worked for me.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 26
  • Comments: 24

Commits related to this issue

Most upvoted comments

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

+34
KEMBL on Oct 24, 2020

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-*
+7
GenericJam on Sep 17, 2020

I can confirm that changing the following in node_modules/jest-haste-map/build/index.js is a workaround:

    const crawl =
      canUseWatchman && this._options.useWatchman
        ? _watchman.default
        : _node.default;

Change to:

    const crawl =
      canUseWatchman && this._options.useWatchman
        ? _node.default
        : _node.default;
+4
slhck on Jan 10, 2020

I am also having this issue.

If you troubleshoot a bit, you will find out that there is an issue when building the haste-map. Basically nothing under node_modules is loaded. It is somehow linked to watchman

Try to 1) locate this line in node_modules/jest-haste-map/build/index.js

const crawl =
      canUseWatchman && this._options.useWatchman
        ? _watchman.default
        : _node.default;
  1. change watchman.default to _node.default (basically tell it to use _node.default)

and restart the packager with the reset option

I am not sure why nothing is loaded when using watchman, I have symlinks and use wml and I think it is somehow because of this.

Using macos, watchman 4.9.0 and latest rn

+4
nonotest on Jan 10, 2020

For anyone seeing this with Expo in a monorepo, I had the wrong workspaceRoot here:

/**
 * @type {import('expo/metro-config')}
 */
const { getDefaultConfig } = require('expo/metro-config')
const path = require('path')

const projectRoot = __dirname
const workspaceRoot = path.resolve(__dirname, '../..')

const config = getDefaultConfig(projectRoot)

config.watchFolders = [workspaceRoot]
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
]

config.resolver.extraNodeModules = {
  modules: workspaceRoot,
}

console.log('config', config)

module.exports = config

I had to change it from .. to ../...

I am setting a monorepo right now and your pointer was a solution for me, editing metro.config.js from

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

to

const resolve = require('path').resolve;
const WORKSPACE_ROOT = resolve(PROJECT_ROOT, '../../');

console.log(PROJECT_ROOT);
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  watchFolders: [WORKSPACE_ROOT],
};
+1
sw0ok on Jun 18, 2023

For anyone seeing this with Expo in a monorepo, I had the wrong workspaceRoot here:

/**
 * @type {import('expo/metro-config')}
 */
const { getDefaultConfig } = require('expo/metro-config')
const path = require('path')

const projectRoot = __dirname
const workspaceRoot = path.resolve(__dirname, '../..')

const config = getDefaultConfig(projectRoot)

config.watchFolders = [workspaceRoot]
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
]

config.resolver.extraNodeModules = {
  modules: workspaceRoot,
}

console.log('config', config)

module.exports = config

I had to change it from .. to ../...

+1
nandorojo on Apr 21, 2023

Resolved by npm install next Explanation: npx next dev will run either from global location (~/.npm/_npx/.../node_modules/next/dist/client) or current directory (when next is installed into ./node_modules). Because you probably don’t have next installed, it searches in global location.

+1
iegik on Aug 30, 2022

I had the same error message but only when using Formik (in expo snack only ) so i found this solution: added the formik dependecy to the json file

{
  "dependencies": {
    "yup": "*",
    **"formik": ">= 0.11.x < 2",**
    "expo-constants": "~13.1.1",
    "expo-image-picker": "~13.1.1",
    "@expo/vector-icons": "^13.0.0",
    "react-native-paper": "4.9.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-gesture-handler/Swipeable": "~2.2.1",
    "babel-preset-react-native": "5.0.2"
  }
}
+1
souli2020 on Jul 11, 2022

Sorry, I haven’t figured out any other solution. Just get rid of watchman and everything should be fine.

+1
slhck on Feb 5, 2020

Note: Instead of modifying the file, I’ve uninstalled watchman and everything seems to run for the time being.

+1
slhck on Jan 10, 2020
Read more comments on GitHub
← react-native: Unable to resolve module
react-native: "Unable to resolve module" from dependency →