Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Aximem opened this issue Sep 25, 2018 · 91 comments
Labels
Bug Stale There has been a lack of activity on this issue and it may be closed soon. Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used.

Comments

@Aximem
Copy link

Aximem commented Sep 25, 2018

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

capture d ecran 2018-09-25 a 09 37 54

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
Copy link
Contributor

Should wait for this to be merged #21283

@Aximem

This comment has been minimized.

@rodrigoelp
Copy link

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

@Cnordbo
Copy link

Cnordbo commented Sep 25, 2018

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

@jlcool

This comment has been minimized.

@silent-tan

This comment has been minimized.

@g4laura
Copy link

g4laura commented Sep 25, 2018

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
Copy link

boovius commented Sep 25, 2018

wow @g4laura you da man (woman) ! 👍

@sungkhum
Copy link

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
Copy link

masashi49 commented Sep 26, 2018

私の環境です

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

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

npm add @babel/runtime  
npm install

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

@zenz
Copy link

zenz commented Sep 26, 2018

just add @babel/runtime to devDependencies is ok.

yarn add @babel/runtime --dev

@sunnylqm
Copy link
Contributor

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

@vyvee
Copy link

vyvee commented Sep 26, 2018

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
Copy link

Thanks @Aximem . Your suggestion worked !!!

@ThPch
Copy link

ThPch commented Sep 26, 2018

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
Copy link

ZhengzheYang commented Sep 26, 2018

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
Copy link

DZuz14 commented Sep 26, 2018

@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
Copy link

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
Copy link

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

@dackmin
Copy link

dackmin commented Sep 27, 2018

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
Copy link

raikusy commented Sep 27, 2018

@g4laura Thanks mate! It simply worked ❤️

@JuanM04
Copy link

JuanM04 commented Sep 27, 2018

@g4laura is our new queen <3

@huzaifasaeed
Copy link

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
Copy link

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
Copy link

Thank you..

@cluis13915
Copy link

cluis13915 commented Sep 28, 2018

Maybe related:
jquense/yup#216 (comment)

@aecorredor
Copy link

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

@Fallup
Copy link

Fallup commented Oct 9, 2019

@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
Copy link

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
Copy link

WangLeb commented Oct 23, 2019

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

@irwinwilliams
Copy link

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

@CryogenicNeo
Copy link

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
Copy link

luatnd commented Dec 9, 2019

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
Copy link

luatnd commented Dec 10, 2019

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
Copy link

grantgeorge commented Feb 14, 2020

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
Copy link

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
Copy link

stale bot commented Jul 3, 2020

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 stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 3, 2020
@stale
Copy link

stale bot commented Jul 11, 2020

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.

@stale stale bot closed this as completed Jul 11, 2020
@hugoh59
Copy link

hugoh59 commented Sep 14, 2020

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

@OlegPanfyorov
Copy link

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

@artadmire
Copy link

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

@lchnnl
Copy link

lchnnl commented Feb 14, 2021

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
Copy link

kovkev commented May 26, 2021

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
Copy link

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

@kockar96
Copy link

kockar96 commented Jan 6, 2023

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
Copy link

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.

Screenshot 2023-04-10 at 12 40 33 PM

ianmacartney added a commit to get-convex/turbo-expo-nextjs-clerk-convex-monorepo that referenced this issue Feb 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Stale There has been a lack of activity on this issue and it may be closed soon. Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used.
Projects
None yet
Development

No branches or pull requests