Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map

[Aximem]

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
Memory: 408.65 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.1, 27.0.2
API Levels: 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

When starting a new project with react-native init then run iOS, I'm getting the error :

Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map

Reproducible Demo

react-native init myapp
// FIX CFBundleIdentifier issue with react-native upgrade
react-native run-ios
Get the error.

FIX

The issue can be fix by doing:
npm add @babel/runtime
npm install
But we shouldn't have to do all this stuff !

[sunnylqm]

Should wait for this to be merged #21283

[rodrigoelp]

I've just run into this issue... ever since xcode 10 came out, the number of issues have been out of this world

[Cnordbo]

Had the same issue on W10 machine.
Its a brand new setup.
Suggested fix works.

  React Native Environment Info:
    System:
      OS: Windows 10
      CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 20.29 GB / 31.81 GB
    Binaries:
      npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.2.0.0 AI-181.5540.7.32.5014246

[g4laura]

for now since a lot of new changes are coming out, this fix worked for me:
with npm:
npm install --save @babel/runtime
or with yarn:
yarn add @babel/runtime
(edited: if you're planning on waiting for the release that fixes this before releasing a new production build (like me) you can keep babel/runtime in devDependencies, but if you want to build a release build with this version of react-native, you need to put @babel/runtime in dependencies as the original poster said)

if on ios you get _this._registerEvents is not a function, after a successful build
do
npm run start --reset-cache
or
react-native start --reset-cache

edit:
should add @babel/core, under resolutions, in package.json
you may also need "babel-core": "7.0.0-bridge.0" in resolutions
but this is more for react-native projects being upgraded..

[boovius]

wow @g4laura you da man (woman) ! 👍

[sungkhum]

You all just fixed the issues I've been having for two days (new to react native). Hopefully these bugs will be fixed, but in the mean time

npm add @babel/runtime
npm install

worked for me. Thanks @Aximem

[masashi49]

私の環境です

react-native-cli: 2.0.1  
react-native: 0.57.0

私もこのエラーが出ていましたが、

npm add @babel/runtime  
npm install

これで動きました！
ありがとう！！

[zenz]

just add @babel/runtime to devDependencies is ok.

yarn add @babel/runtime --dev

[sunnylqm]

Fixed in 1323acd but not landed in any version yet, will try to urge them to land in 0.57.2

[vyvee]

for now after react-native init, since a lot of new changes are coming out, this fix worked for me (I got it from reading other issues):
with npm:
npm install --save-dev @babel/core
npm install --save-dev @babel/runtime
or with yarn:
yarn add --dev @babel/core
yarn add --dev @babel/runtime

if on ios you get _this._registerEvents is not a function, after a successful build
do
npm run start --reset-cache
or
react-native start --reset-cache

Thanks @g4laura ! I have been trying to fix this issue for 2 days & your suggestion (especially the inclusion of @babel/runtime) simply works!!
I have tested it for Android, but not for iOS yet.

[punter82]

Thanks @Aximem . Your suggestion worked !!!

[ThPch]

Thanks for the short fix guys. I'm new to react-native too and it's been 3 days that from a scratch, clean windows install I'm trying to launch a very simple program. Finaly it's working. Thank you again

[ZhengzheYang]

I tried the fix but it did not work... 😔
I am using xcode 10 and I
react-native init and
react-native run-ios
it is the same error in the above.
I tried adding @babel/runtime but no luck. Anybody help...

Edit:
Thank you for your reply. I forgot to close the metro bundler. Silly me.

[DZuz14]

@Aximem solution should hopefully work for most people. Before you do it though, its probably going to go much smoother for you if you close out completely from the simulator and the Metro bundler cli

[jackandero88]

You all just fixed the issues I've been having for two days (new to react native). Hopefully these bugs will be fixed, but in the mean time

npm add @babel/runtime
npm install

worked for me. Thanks @Aximem

It works for me thanks

[rizkisunaryo]

The solution given by the thread starter @Aximem works for me

[dackmin]

Doesn't work for me.
Closed metro bundler & cleared all caches, added @babel/runtime, even tried @babel/core, no luck.

I stumbled across a new error after adding @babel/runtime though :

Can't find variable: require (index.bundle?platform=ios&dev=true&minify=false:410)

Line 410 from the bundle file :

var _typeof = require("@babel/runtime/helpers/typeof");

Object.assign = function (target, sources) {

Isn't require supposed to be replaced by something like metroRequire or __r when bundling ?

[raikusy]

@g4laura Thanks mate! It simply worked ❤️

[JuanM04]

@g4laura is our new queen <3

[huzaifasaeed]

You all just fixed the issues I've been having for two days (new to react native). Hopefully these bugs will be fixed, but in the mean time

npm add @babel/runtime
npm install

worked for me. Thanks @Aximem

It works for me thanks ❤️❤️❤️

[mattrcullum]

for now after react-native init, since a lot of new changes are coming out, this fix worked for me (I got it from reading other issues):
with npm:
npm install --save-dev @babel/core
npm install --save-dev @babel/runtime
or with yarn:
yarn add --dev @babel/core
yarn add --dev @babel/runtime

if on ios you get _this._registerEvents is not a function, after a successful build
do
npm run start --reset-cache
or
react-native start --reset-cache

@g4laura I was bashing my head against the wall contemplating switching industries and then I found your solution and now I'm happy again (for now)! Thank you!!!

[TiagoNunesDeveloper]

Thank you..

[cluis13915]

Maybe related:
jquense/yup#216 (comment)

[aecorredor]

@MANTENN same thing is happening to me but with @babel/runtime/helpers/classCallCheck. I've been trying everything and still nothing.

[Fallup]

@Wellers0n Does #21310 (comment) work with imported packages? The other solutions only fix relative related modules. When I import a package from my monorepo, I run into this issue: Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map.

@MANTENN Have you been able to solve it?
Same thing happens to me when I try to import a file from shared folder.
Just for the record I'm using Typescript and trying to import a shared React Hook so the imported file contains import { useState, useEffect } from 'react'.

I'm on with RN 0.61.2. My setup is a monorepo with Yarn Workspaces.
I've added @babel/runtime and @babel/core to nohoist array to be sure that it stays under node_modules in my mobile package:

  "workspaces": {
    "nohoist": [
      "**/@babel/core",
      "**/@babel/core/**",
      "**/@babel/runtime",
      "**/@babel/runtime/**",
     ...
    ]

When I try to run the app I got:

error: bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `index.tsx`: @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories:
...path to mobile project.../node_modules/@babel/runtime/helpers

When I check my ...path to mobile project.../node_modules/ the /@babel/runtime/helpers/interopRequireDefault is there 😕

My metro.config.js looks like this:

const path = require('path')

const extraNodeModules =
  new Proxy(
    {
      '@local/core': path.resolve(__dirname, '../../local-packages/core/src/'),
      '@local/types': path.resolve(__dirname, '../../local-packages/types/src/'),
      '@local/theme': path.resolve(__dirname, '../../local-packages/theme/src/'),
    },
    {
      get: (target, name) => {
        if (target.hasOwnProperty(name)) {
          return target[name]
        }
        return path.join(process.cwd(), `node_modules/${name}`)
      },
    },
  )

const watchFolders = [
  path.resolve(__dirname, '../../local-packages'),
  path.resolve(__dirname, 'node_modules')
]

module.exports = {
  projectRoot: path.resolve(__dirname),
  transformer: {
    babelTransformerPath: require.resolve('react-native-typescript-transformer'),
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    extraNodeModules,
    sourceExts: ['ts', 'tsx'],
  },
  watchFolders,
}

EDIT:
So in this case it was pretty simple and not related at all to shared folder. I forgot to put .js to the sourceExts when I was moving things from rn-cli.config.js:

  resolver: {
    extraNodeModules,
    sourceExts: ['ts', 'tsx'],  =====> should be ['ts', 'tsx', 'js']
  },

So babel was not picking up .js files from dependencies and @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map happened to be the first error to get 🤦‍♂️

This is the final metro.config.js in my case:

const path = require('path')

const extraNodeModules =
  new Proxy(
    {
      // If we would have an actual package with "package.json" it would go here.
      // e.g. if @local/core would be a package:
      // '@local/core': path.resolve(__dirname, '../../local-packages/core/'),
    },
    {
      get: (target, name) => {
        if (target.hasOwnProperty(name)) {
          return target[name]
        }
        // Redirect dependencies referenced from shared folders to mobile package node_modules
        return path.join(process.cwd(), `node_modules/${name}`)
      },
    },
  )

const watchFolders = [
  // Watch directory where shared folders are located
  path.resolve(__dirname, '../../local-packages'),
  // Watch root package node_modules to follow symlinks of yarn hoisted packages
  path.resolve(__dirname, '../../node_modules')
]

module.exports = {
  projectRoot: path.resolve(__dirname),
  transformer: {
    babelTransformerPath: require.resolve('react-native-typescript-transformer'),
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    extraNodeModules,
    // Allow to process TS files
    sourceExts: ['ts', 'tsx', 'js', 'jsx'],
  },
  watchFolders,
}

And here is the babel.config.js for completeness:

const path = require('path')

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./src'],
          extensions: ['.ts', '.tsx', '.js', '.jsx', '.ios.js', '.android.js'],
          alias: {
            '@local/core': path.resolve(
              __dirname,
              '../../local-packages/core/src/',
            ),
            '@local/types': path.resolve(
              __dirname,
              '../../local-packages/types/src/',
            ),
            '@local/theme': path.resolve(
              __dirname,
              '../../local-packages/theme/src/',
            ),
          },
        },
      ],
    ],
  }
}

You need the babel-module-resolver to make it work correctly with absolute paths.

[flybayer]

Here's my solution for workspaces and importing shared code (on a non-Expo app)

// package.json
  "devDependencies": {
    ...
    "expo-yarn-workspaces": "1.2.1"
  },
  "workspaces": {
    "nohoist": [
      "react-native",
      "react-native-*",
      "react-native/**",
      "expo-yarn-workspaces"
    ]
  }

// metro.config.js
const { createMetroConfiguration } = require("expo-yarn-workspaces")

const config = createMetroConfiguration(__dirname)

// Make react-native import from files in other workspace resolve to node_modules in this dir
config.resolver.extraNodeModules["react-native"] = `${__dirname}/node_modules/react-native`

// Default metro config
config.transformer.getTransformOptions = async () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: false,
  },
})

module.exports = config

[WangLeb]

you can try to rebuild this project or create project initial by expo utils

[irwinwilliams]

Most solutions involve npm install --save @babel/runtime
I needed to remember to close the metro packager instance first.

[CryogenicNeo]

I have solved the problem by removing from watchman's configuration files (in my case it was .watchmanconfig) this line:

"ignore_dirs": ["node_modules"],

[luatnd]

Just in my case:

• I've already had @babel/runtime in devDependencies
• empty .watchmanconfig cannot fix the errors
• remove all node_modules/ and yarn install again => work!
  It might because one of node_module is in my local development, and I try npm link and watchman ..., etc so bundle server haste map is confusing, I think!

[luatnd]

Today, I met that issue again, and run it solve the issue:

rm -rf node_modules/
watchman watch-del-all
react-native start --reset-cache

I use @babel/runtime as devDependencies.

[grantgeorge]

Fun morning. I had to reset a bunch of dependencies and caches to get things to work. I ended up having to do a combination of things mentioned in this issue and this post.

yarn add @babel/runtime --dev --exact

Ensure that @babel/core and @babel/runtime had matching, exact versions in dev dependencies in package.json.

"@babel/core": "7.8.4",
"@babel/runtime": "7.8.4",

Nuke & pave:

rm -rf node_modules
yarn cache clean -f
watchman watch-del-all
rm -rf $TMPDIR/metro*
rm -rf $TMPDIR/react-native*
yarn install
react-native start --reset-cache

[robertoporlan]

para mim o problema foi porque eu estou usando raiz personalizada. há um problema com a raiz personalizada no RN59: # 24432

adicionar um arquivo metro.config à minha raiz personalizada com uma propriedade watch-folders resolveu meu problema:
metro.config.js:

module.exports = {
  watchFolders: [`${__dirname}/../..`],
};

Thank You so mutch! You save me! haha

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[hugoh59]

I'm still getting this issue with react-native 0.63.2 and none of these solved it.

[OlegPanfyorov]

@hugoh59 Same for me, I'm really shocked. I tried everything. RN is a piece of shit

[artadmire]

I'm still getting this issue with react-native 0.63.2 and none of these solved it. Please helper!

[lchnnl]

I had the same issue. This is what i did to resolve.
Update homebrew (brew update)
Upgrade watchman (brew upgrade watchman)
Made the changes as suggested by (here)[https://github.com//issues/27712#issuecomment-572889578]

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

Then ran my npx react-native bundle ....
After successful run
I changed the code back to the original

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

[kovkev]

I am getting this issue with

System:
    OS: macOS 11.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 474.82 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.4 - ~/project/node_modules/.bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/lib/ruby/gems/2.7.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 23, 27, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.3
      System Images: android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-R | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6858069
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.1 => 0.64.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

I am not sure how to troubleshoot it. I've tried the solutions presented here.

[matthew-dean]

Getting this issue with importing directly a TypeScript module package. Wiping and re-installing with pnpm install has not worked.

[kockar96]

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

[chiraag918]

I am facing a similar issue, but it is on reactjs. So I have a component library which I have published on github packages using Rollup as my bundler. The component library is also developed in reactjs. So when I install this library on a consumer application(reactjs web app), I'm getting the error as shown in the attached screenshot. Until a month and a half ago everything was working fine. After which I published a new version and ever since that I'm facing the same issue. The version previous to this new version that I published a month and a half ago is working fine but anything published after this version throws up the same error. I even reverted the code back to how it is on the version that is working, but no luck. Requesting help on this issue. Need to resolve this as early as possible.