react-native: Failed to load bundle: Cannot read property 'throwIfClosureRequired' of undefined

Environment

Environment: OS: macOS High Sierra 10.13.4 Node: 9.5.0 Yarn: 1.5.1 npm: 5.8.0 Watchman: 4.9.0 Xcode: Xcode 9.3 Build version 9E145 Android Studio: Not Found

Packages: (wanted => installed) react: 16.3.1 => 16.3.1 react-native: 0.55.3 => 0.55.3

Steps to Reproduce

react-native init RNApp
# ...
react-native run-ios

or by opening RNApp.xcodeproj and hitting “run”

Expected Behavior

App launches normally on simulator

Actual Behavior

screen shot 2018-04-20 at 19 41 25

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 28
  • Comments: 63 (3 by maintainers)

Commits related to this issue

Most upvoted comments

@andrewcpeltier,

Open your package.json and change the devDependencies to:

  "devDependencies": {
    ...
    "babel-preset-react-native": "4.0.0",
    ...
  },

Then run npm install.

downgraded babel-preset-react-native to 4.0.0 and worked

This is throwing in my tests when upgrading to babel-preset-react-native to 5.0.0

Does not happen on 4.x of preset with 0.55.3 of react-native installed

open package.json

and replace this code “babel-preset-react-native”: “5.0.0”

with “babel-preset-react-native”: “4.0.0”,

and then run npm install

If not work try this solution. i) delete node_module folder. ii) Open your package.json and change the devDependencies to:

“devDependencies”: { … “babel-preset-react-native”: “4.0.0”, … }, Then run npm install. It’s worked for me.

How do you downgrade bable-preset-react-native to 4.0.0?

First time I tried to play with react-native and I was greeted by the same bug too. So unfortunate for a first experience!! I can however confirm that downgrading babel-preset-react-native to 4.0.0 worked for me as well.

@chuwuwang I am going to delete your comment and report this activity to Github. We do not accept such behavior that is way below the accepted standards. If React Native pisses you off, just don’t use it. It’s free world.

Guys don’t forget to remove yarn.lock or package-lock.json, before you do yarn install (npm install), otherwise the change of the version won’t help 😉

This issue is caused by the fact babel-preset-react-native depends on babel@v7.0.0-beta.40.

This version had an issue on babel-plugin-transform-block-scoping, as at this stage babel-helper-plugin-utils had not yet been created, and this one (created on v7.0.0-beta.41) is used to set a default {} for the options when they are not present (see here), that’s the case for babel-plugin-transform-block-scoping declared here.

The only alternative would be to use yarn resolutions and lock all the babel depedencies to latest, but sadly this doesn’t work either, as metro-bundler is in the middle of the migration to babel 7 and they are still using babel-core (core package from babel version 6), so when you run the packager, everything breaks.

So based on all this, I believe that the most sane alternative is to wait for babel-preset-react-native and metro-bundler to update their babel dependencies to latest and meanwhile keep using v4.0.0.

I’m still get the same red error screen if I set the dev dependency to "babel-preset-react-native": "4.0.0". Anybody else running into the same issue?

I can confirm changing to "babel-preset-react-native": "4.0.0" also worked for me +1

@pritam-patil @lehoangnam97 Started work, I restarted the computer. 😄

For those who have updated the “babel-preset-react-native” to version “4.0.0”, and still seeing the issue:

  1. Run npm install again, before running the app with react-native run-android or react-native run-ios
  2. If you still see the issue, clear ‘node_modules’ directory, run rm -rf node_modules/ from your project directory and repeat step 1.

Worked for me with the environment:

  • OS: Ubuntu 17.04 64-bit
  • Project dependancies (package.json):
"dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.3"
  },
  "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.1"
  }

Change “babel-preset-react-native”: “^4.0.0” and it work for me

@GantMan

The issue are due to these lines in the react-native init script (copied below):

https://github.com/facebook/react-native/blob/57919a3edd3d09f595224e0d92f95da1df75e884/local-cli/init/init.js#L88-L97

You can see that the jestDeps are jest babel-jest babel-preset-react-native react-test-renderer@${reactVersion}, but only the react-test-renderer is given a version. Which means every time anyone runs the react-native init script, it’ll install the latest jest, babel-jest and babel-preset-react-native versions from npm as devDependencies.

The change you see shouldn’t actually affect why we see this bug, but rather, it’s the fact that version 5.0.0 of babel-preset-react-native was made the latest release about 9 hours ago: https://www.npmjs.com/package/babel-preset-react-native

That also explains why this bug was created 8 hours ago.

What’s funny is this wasn’t changed that long ago: https://github.com/facebook/react-native/commit/34bd776af2f2529009188fced91083203a48fd40

Odd how that came right through to everyone’s CLI. Seems to me it should be tied to the specific RN version, not github?

@andrewcpeltier I just ran into this issue as well. Just edit the version number in your package.json file and npm install.

Edit: Worked for me as well by the way!