Unable to resolve module `@babel/runtime/helpers/interopRequireDefault`
React NativeReact Native Problem Overview
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
React Native Solutions
Solution 1 - React Native
Have a go and try:
npm add @babel/runtime
Or upgrade babel runtime:
"@babel/runtime": "7.0.0-beta.55"
Solution 2 - React Native
You should first quit the metro terminal before executing
npm add @babel/runtime
npm install
Solution 3 - React Native
You should add and install babel for your projects
npm add @babel/runtime
npm install
If The error is not fixed, Try:
npm start --reset-cache
Solution 4 - React Native
Try to update your npm version first
npm update -g npm@version
or sudo npm -gf update npm@version
and then just add the babel runtime at your react native project
npm add @babel/runtime
Solution 5 - React Native
Try upgrading your packages. You could have an old package causing the problem:
yarn upgrade-interactive --latest
Solution 6 - React Native
The issue for me was that @babel/runtime was installed as a dev-dependency instead of just a normal (non-dev) dependency
Solution 7 - React Native
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.
Solution 8 - React Native
I had this problem today (April 2021), and I could solve it only by removing the webpack-node-externals
package from my webpack configuration.
Solution 9 - React Native
For me the solution was (Mac):
- Stop IntelliJ
- Enter terminal
- Run:
npx browserslist@latest --update-db -g
- Run:
npm cache verify
- Start IntelliJ
If still not working:
- Delete node_modules fron project if exists
- Run:
npm cache verify
- Run npm install -f in project
- Run:
npx browserslist@latest --update-db -g
Solution 10 - React Native
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.
Solution 11 - React Native
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
Solution 12 - React Native
Had this issue none of the above listed solutions worked for me, I had to go to node_modules/jest-haste-map/build/index.js
changed const crawl = canUseWatchman && this._options.useWatchman ? _watchman.default : _node.default;
to const crawl = canUseWatchman && this._options.useWatchman ? _node.default : _node.default;