无法解析模块“@babel/run/helpers/interopRequreDefault”

当使用标准 react-native init MyApp创建一个新的反应本机项目并第一次运行 react-native run-ios时，我看到了以下错误

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)

我试过运行建议，但仍然看到同样的问题。我看过一些关于类似问题的帖子，但似乎没有具体说明如何在本地反应中解决这个问题。

macOS: 10.13.6
node: 8.11.3
react-native-cli: 2.0.1
react-native: 0.57.1
75031 次浏览
小开
最佳答案

Have a go and try:

npm add @babel/runtime

Or upgrade babel runtime:

"@babel/runtime": "7.0.0-beta.55"

小开

You should first quit the metro terminal before executing

npm add @babel/runtime
npm install
小开

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

小开

Try upgrading your packages. You could have an old package causing the problem:

yarn upgrade-interactive --latest
小开

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
小开

Current error message suggests these steps to fix this:

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

The last one solved it for me.

小开

I had this problem today (April 2021), and I could solve it only by removing the webpack-node-externals package from my webpack configuration.

小开

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;

小开

For me the solution was (Mac):

  1. Stop IntelliJ
  2. Enter terminal
  3. Run: npx browserslist@latest --update-db -g
  4. Run: npm cache verify
  5. Start IntelliJ

If still not working:

  1. Delete node_modules fron project if exists
  2. Run: npm cache verify
  3. Run npm install -f in project
  4. Run: npx browserslist@latest --update-db -g
小开

The issue for me was that @babel/runtime was installed as a dev-dependency instead of just a normal (non-dev) dependency

小开

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.

小开

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

小开

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

小开

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

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

小开

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.

  1. By uninstalling the app and using the following commands.

    npx jest --clearCache

    npm update

    npm i

    npx react-native run-android

  2. By deleting the local repository and re-cloning it.

Hope this helps you.

小开

I just uninstalled watchman. It worked for me.

brew uninstall watchman

提交答案