Reputation: 3236

Unable to resolve module `@babel/runtime/helpers/interopRequireDefault`

When creating a new React Native project using the standard react-native init MyApp and running react-native run-ios for the first time, I'm seeing the following error :

error: bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `/Users/chrisedgington/Development/ReactNative/SixNationsPredictor/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 (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
    at ResolutionRequest.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
    at Object.resolve (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/lib/transformHelpers.js:180:25)
    at dependencies.map.result (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
    at /Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
    at Generator.next (<anonymous>)
    at step (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)

I've tried running the suggested, but still see the same issue. I've seen a few posts about similar issues, but nothing specifically seems to say how to resolve the problem in React Native.

macOS: 10.13.6 
node: 8.11.3
react-native-cli: 2.0.1
react-native: 0.57.1

Upvotes: 135

Answers (21)

GenericJam

Reputation: 3015

Current error message suggests these steps to fix this:

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

The last one solved it for me.

anyone having this error in 2024 for me step 1 solved this issue

Upvotes: 5

Chandragupt

Reputation: 11

I was using pnpm and installing @babel/runtime didn't work for me, instead using yarn solved issue (existing github project).

Upvotes: 0

Omar Saade

Reputation: 591

try to add :

npm add @babel/runtime

then

 pod install

and everything will work

Upvotes: 4

PHZ.fi-Pharazon

Reputation: 2073

In my case node_modules was a symlink (to /opt/node_modules). Removing the symlink and recreating node_modules as a directory helped.

Upvotes: 0

judicodes

Reputation: 49

FOR REACT NATIVE IN 2023!

If you're working on a react-native project and face this or a similar error, cd into your ios folder and run pod install

cd ios

pod install

Then, start your metro server and run the project again.

Upvotes: 0

Aleksa Živanović

Reputation: 41

Someone may find this helpful. I had the same problem while using turborepo and Expo. Resolved it by adding 'node-linker=hoisted' to .npmrc.

Upvotes: 2

Amaresh S M

Reputation: 3010

I just uninstalled watchman. It worked for me.

brew uninstall watchman

Upvotes: 2

Manil Malla

Reputation: 223

I accidentally deleted my node_modules and package-lock.json. I used npm i to regenerate them and suddenly I was getting the above error. I solved it in two ways.

By uninstalling the app and using the following commands.

npx jest --clearCache

npm update

npm i

npx react-native run-android
By deleting the local repository and re-cloning it.

Hope this helps you.

Upvotes: 2

ixhimanshu

Reputation: 115

Install latest Babel/runtime => install @babel/runtime

After that clean or reset the cache => npm start -- --reset-cache after or npm cache clean --force

Upvotes: 0

chenop

Reputation: 5133

In case you are working with Yarn workspaces please note you are running react-native start from the right project...

Upvotes: 0

Conrad Johnston

Reputation: 319

I tried all the things mentioned above, and, I found myself here again tonight.

Running from a nrwl mono repo, I had to cd into the app that was having the problem and run.

jest --clearCache

Upvotes: 21

Iman Mahmoudinasab

Reputation: 7015

Problem:

I was in the middle of upgrading flow to typescript and I used @khanacademy/flow-to-ts to convert js files to ts. the lib not only changed the js files of the app but also it converted all js files in node_modules directory.

Solution:

I had to remove the node_modules and npm -i. This time when I checked the node_modules the interopRequireDefault.js file was there.

Upvotes: 0