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

Open
Aximem opened this Issue Sep 25, 2018 · 58 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Copy link
Contributor

sunnylqm commented Sep 25, 2018

Should wait for this to be merged #21283

@Aximem

This comment was marked as off-topic.

Copy link
Author

Aximem commented Sep 25, 2018

Ok thanks I'm waiting :/
I know it won't help but I just wanted to say that this is becoming to be a pain in the ass to start a React Native project.
Many beginners that I met gave up on React Native just because they weren't able to launch the application, even after resolving several issues... And I'm not speaking about create-react-native-app where they completely messed up the last version with new CLI, eject broken etc.

@rodrigoelp

This comment has been minimized.

Copy link

rodrigoelp commented Sep 25, 2018

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

@Cnordbo

This comment has been minimized.

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 was marked as off-topic.

Copy link

jlcool commented Sep 25, 2018

解决

@farzer

This comment was marked as off-topic.

Copy link

farzer commented Sep 25, 2018

mark

@g4laura

This comment has been minimized.

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

This comment has been minimized.

Copy link

boovius commented Sep 25, 2018

wow @g4laura you da man (woman) ! 👍

@sungkhum

This comment has been minimized.

Copy link

sungkhum commented Sep 25, 2018

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

zenz commented Sep 26, 2018

just add @babel/runtime to devDependencies is ok.

yarn add @babel/runtime --dev

@sunnylqm

This comment has been minimized.

Copy link
Contributor

sunnylqm commented Sep 26, 2018

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

@vyvee

This comment has been minimized.

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

This comment has been minimized.

Copy link

punter82 commented Sep 26, 2018

Thanks @Aximem . Your suggestion worked !!!

@ThomasPerche

This comment has been minimized.

Copy link

ThomasPerche 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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

jackandero88 commented Sep 27, 2018

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

This comment has been minimized.

Copy link

rizkisunaryo commented Sep 27, 2018

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

@dackmin

This comment has been minimized.

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

This comment has been minimized.

Copy link

raikusy commented Sep 27, 2018

@g4laura Thanks mate! It simply worked ❤️

@JuanM04

This comment has been minimized.

Copy link

JuanM04 commented Sep 27, 2018

@g4laura is our new queen <3

@huzaifasaeed

This comment has been minimized.

Copy link

huzaifasaeed commented Sep 27, 2018

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 ❤️❤️❤️

@cconcise

This comment has been minimized.

Copy link

cconcise commented Sep 27, 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

@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

This comment has been minimized.

Copy link

TiagoNunesDeveloper commented Sep 28, 2018

Thank you..

@cluis13915

This comment has been minimized.

Copy link

cluis13915 commented Sep 28, 2018

Maybe related:
jquense/yup#216 (comment)

@haiderkhalil

This comment has been minimized.

Copy link

haiderkhalil commented Oct 1, 2018

@g4laura Thanks

@mureiken

This comment has been minimized.

Copy link

mureiken commented Oct 1, 2018

quitting metro terminal before

npm add @babel/runtime
npm install

worked for me

@flascelles

This comment has been minimized.

Copy link

flascelles commented Oct 2, 2018

worked for me. huge thanks

@masteryodareturns

This comment has been minimized.

Copy link

masteryodareturns commented Oct 3, 2018

Thanks @Aximem . Your suggestion worked ! Hope there is a patch coming soon to fix this, adding the extra step each time can be nagging.

@RuthenicEye

This comment has been minimized.

Copy link

RuthenicEye commented Oct 3, 2018

npm add @babel/runtime worked for me..

@geekShaw86

This comment has been minimized.

Copy link

geekShaw86 commented Oct 4, 2018

for now 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/runtime
or with yarn:
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

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

thank you very much, I am a newbie to react native and just ran into this problem on Mac when running Android, it works like a charm

@royjobs3

This comment has been minimized.

Copy link

royjobs3 commented Oct 5, 2018

After execute the following commands
npm add @babel/runtime
npm install

You can close your command line window and re-open the window for running your react native app

@royjobs3

This comment has been minimized.

Copy link

royjobs3 commented Oct 5, 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.

After adding @babel/runtime you need restart your command line window.

@tmle

This comment has been minimized.

Copy link

tmle commented Oct 6, 2018

for now 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/runtime
or with yarn:
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

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

Thank you g4laura . I just did the first two steps. Didn't have to edit the package.json file. It works. Thanks a lot.

@jbrodriguez

This comment has been minimized.

Copy link

jbrodriguez commented Oct 11, 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 ?

@dackmin, I'm getting the exact same error.

I'm on 10.13.5, Xcode 9, Node 10

Are you on Xcode 9 too?

I think it may be the cause of the issue.

@dackmin

This comment has been minimized.

Copy link

dackmin commented Oct 11, 2018

@jbrodriguez so I'm not crazy 🎉

But nope : macOs 10.14, Xcode 10 & Node 8.11.3

@rodrigoelp

This comment has been minimized.

Copy link

rodrigoelp commented Oct 12, 2018

@jbrodriguez and @dackmin, could you guys provide a few steps to reproduce it?

I am on macOs 10.14, xcode 10, node 8.12.0 and yarn 1.10.0

In my case, when I create a new project I do the following steps:

$ react-native init whatever
$ react-native run-ios # due to some unknown issue.. the first time continues to fail on my mac.
$ react-native run-ios # this time it will install, but fail with a metro bundler issue...

# so in a new terminal run
$ react-native start --reset-cache

# finally, run
react-native run-ios

Is perfectly fine... all you need to do is run react native run ios three times, reset the cache, hope for a shooting star hitting the international space station while curiosity rover sends information back to NASA with a response code 201 and your mac sends an ack packet back to your router. Because running three times react-native run-ios is so much better than running react-native run-ios four times.

@arshbhatti8

This comment has been minimized.

Copy link

arshbhatti8 commented Oct 12, 2018

I tried doing

npm install --save-dev @babel/core

and

npm install --save-dev @babel/runtime

But it still gives me the same errors. I tried clearing the cache using:

react-native start --reset-cache

After all of this, I open a new Command Window and try using:

npm run android

Still Gives me the same errors

@SMJ93

This comment has been minimized.

Copy link

SMJ93 commented Oct 18, 2018

@dackmin @jbrodriguez @arshbhatti8 I am getting the same issue too:

react-native-cli: 2.0.1
react-native: 0.57.2
react: 16.5.0
lerna: 2.0.0

node: 10.5.0
npm: 6.4.1
mac OS: 10.14
xcode: 10

This was working for me a few days ago... since then I have upgraded mac OS to mojave. Could be related?

@SMJ93

This comment has been minimized.

Copy link

SMJ93 commented Oct 18, 2018

I managed to fix it thanks to this thread.

I added a babel.config.js to the root of our project as we have a monorepo structure which includes web, native, graph and shared. Which added the preset env to my react-native 🤦‍♂️

Removing this babel.config.js (project wide babel config) fixed the issue. We have reverted back to separate .babelrc's for each package.

@romulojjunior

This comment has been minimized.

Copy link

romulojjunior commented Jan 4, 2019

I had installed "watchman" from "brew".
When I removed, "brew remove watchman", the RN application work.

@nujabes403

This comment has been minimized.

Copy link

nujabes403 commented Feb 13, 2019

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 ?

@dackmin Have you solved this issue? As you said, I think require supposed to be replaced by something like metroRequire or __r when bundling.

@dackmin

This comment has been minimized.

Copy link

dackmin commented Feb 13, 2019

@nujabes403 yes and no, I simply downgraded to the previous version of react native (0.56) at that time to make it work as intended, but never tried with 0.57 again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment