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

Aximem commented 5 years ago

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 commented 5 years ago

Should wait for this to be merged https://github.com/facebook/react-native/pull/21283

Aximem commented 5 years ago

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 commented 5 years ago

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

Cnordbo commented 5 years ago

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 commented 5 years ago

解决

silent-tan commented 5 years ago

mark

g4laura commented 5 years ago

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 commented 5 years ago

wow @g4laura you da man (woman) ! 👍

sungkhum commented 5 years ago

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 commented 5 years ago

私の環境です

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

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

npm add @babel/runtime  
npm install

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

zenz commented 5 years ago

just add @babel/runtime to devDependencies is ok.

yarn add @babel/runtime --dev

sunnylqm commented 5 years ago

Fixed in https://github.com/facebook/react-native/commit/1323acd0bb23eb5df76ee6561ba86f4802b7432f but not landed in any version yet, will try to urge them to land in 0.57.2

vyvee commented 5 years ago

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 commented 5 years ago

Thanks @Aximem . Your suggestion worked !!!

ThPch commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

dackmin commented 5 years ago

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 commented 5 years ago

@g4laura Thanks mate! It simply worked ❤️

JuanM04 commented 5 years ago

@g4laura is our new queen <3

huzaifasaeed commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Thank you..

cluis13915 commented 5 years ago

g4laura commented 5 years ago

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 ?

Are you upgrading a project from a pervious version of react-native?

in package.json your dev dependencies should look similar to this: "devDependencies": { "@babel/core": "^7.1.0", "@babel/runtime": "^7.0.0", "babel-jest": "23.6.0", "jest": "23.6.0", "metro-react-native-babel-preset": "0.46.0", //note this replaces "babel-preset-react-native": "^5", "react-test-renderer": "16.5.0" },

you may also need to add babel-core": "7.0.0-bridge.0" as a yarn resolution to ensure retro-compatibility

and your .babelrc file should look this: { "presets": ["module:metro-react-native-babel-preset"] }

https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057

dackmin commented 5 years ago

Are you upgrading a project from a pervious version of react-native?

Yep, from 0.56.0 to 0.57.1.

in package.json your dev dependencies should look similar to this: "devDependencies": { "@babel/core": "^7.1.0", "@babel/runtime": "^7.0.0", "babel-jest": "23.6.0", "jest": "23.6.0", "metro-react-native-babel-preset": "0.46.0", //note this replaces "babel-preset-react-native": "^5", "react-test-renderer": "16.5.0" },

I already tried to upgrade to babel 7 updating react native preset alongside, no luck.

you may also need to add babel-core": "7.0.0-bridge.0" as a yarn resolution to ensure retro-compatibility

Yep, I read the docs too, and added the bridge, still no luck.

and your .babelrc file should look this: { "presets": ["module:metro-react-native-babel-preset"] }

Yep, that was in the docs, done too. Plus, I only have two plugins that work perfectly in any other project:

"plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-object-rest-spread"
]

My guess is that @babel/runtime helpers are not parsed correctly, for an unknown and shady reason. I downgraded to react-native@0.56.0 and babel 6 for now, but I will try again removing all plugins and dependencies that can interfere with this.

g4laura commented 5 years ago

@dackmin good luck! I upgraded from 0.56.0 to 0.57.1 too, I got it working eventually, I did it the react-native upgrade way and rn-diff was helpful

HoangDu95 commented 5 years ago

@g4laura Thank you !! I built sucessful ^^

orimslala commented 5 years ago

@Aximem you rock! i spent the last 24 hours trying to get through this. If the community wants people like myself new to react-native to embrace this framework then such nightmares should be fixed asap. Thanks to everyone again.

shashank-shanks commented 5 years ago

@Aximem ! Thanks a lot ! You literally saved my computer from destruction. I was so frustrated that i wasnt sure if the mac or the iphone would survive my wrath :P

enzzoperez commented 5 years ago

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

worked for me, thanks!

jayb967 commented 5 years ago

Thanks!!

kuyajuts commented 5 years ago

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! I'm currently studying react and has stumbled upon this error - your fix allowed me to continue my journey. :)

ghost commented 5 years ago

Perfect, thanks!!!

rowanD72 commented 5 years ago

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

rowanD72 commented 5 years ago

Thank you so much. This worked for me. All I had to do was add the babel packages and my simulator fired right up. Thanks a million.

jamonholmgren commented 5 years ago

The core team is aware of this and will try to get a new release out as soon as possible.

DZuz14 commented 5 years ago

Might be worthwhile to mention that the Babel documentation recommends also installing the dev plugin, "@babel/plugin-transform-runtime" alongside "@babel/runtime".

Runtime usage

Also, it might be nice for anyone experiencing this issue and coming here for the first time, to try installing just, "@babel/runtime" in your "dependencies" portion of your package.json. For me, it did not require installing "@babel/core" like other people are saying. This leads me to believe that its one of those cases where people are installing extraneous packages and thinking that all of them solved the problem, when in reality it was only a subset of them.

haiderkhalil commented 5 years ago

@g4laura Thanks

mureiken commented 5 years ago

quitting metro terminal before

npm add @babel/runtime npm install

worked for me

ghost commented 5 years ago

worked for me. huge thanks

cloudomate commented 5 years ago

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 commented 5 years ago

npm add @babel/runtime worked for me..

geekShaw86 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.

facebook / react-native