0.19 - Unable to run in simulator using main.jsbundle - Unable to execute JS call: __fbBatchedBridge is undefined

[tdugger]

I've recently upgraded to 0.19 and my app runs fine if I am getting the javascript from the react packager using this line in AppDelegate.m:

jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.10:8081/index.ios.bundle?platform=ios&dev=true"];

(note that I have to use my IP address here and have that IP added as an App Transport Security Setting exception, I guess because I use google auth in my app).

But to let others run my app through Xcode, while we are developing the backend, I was creating the main.jsbundle using this command:

curl http://localhost:8081/index.ios.bundle -o main.jsbundle

And this worked fine with 0.18.1, but after upgrading to 0.19, if I run the the simulator or even on the device whith this line in AppDelegate.m:

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

I get the error:
Unable to execute JS call: __fbBatchedBride is undefined

I do get this message repeated in the Xcode console.

I've read all stackoverflows and issues that match __fbBatchedBridge is undefined and haven't come up with an answer. I guess dropping back to 0.18.1 and that didn't solve the problem (see comments below).

[facebook-github-bot]

Hey tdugger, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[tdugger]

Also, when I did the react-native upgrade, I ran across many files that I have changed that it wanted to overwrite. I looked at each of them carefully (with the diff option) and I didn't notice anything that was new in .19 that I needed in those files so I chose not to overwrite them. We really need an option of "merge" and have it add <<<< and >>>> lines that we can then examine the differences better. So, there could have been something that I needed to update but didn't.

[tdugger]

Even going back to 0.18.1, didn't help. I can run through the react packager, but can't through the main.jsbundle and I used to be able to. I think there is no going back from 0.18.1 since .19 upgrade did change some files. But I'm stuck where the only way to run my app is through the react packager, I can't install on device and use main.jsbundle.

[tdugger]

I did finally getting working again with 0.18.1. I added back the build phase step that runs the ../node_modules/react-native/packager/react-native-xcode.sh script. I removed that from my projects because after upgrading to 0.19 I was getting the __fbBatchedBridge is undefined error and an issue indicated to remove the script or edit it and the reason was "we expect you only run with the main.jsbundle" on the device.

So, basically, with 0.19, I'm unable to run with main.jsbundle unless I'm running from the device (in which case I need that react-native-xcode.sh script as a build phase, but when running from the react packager process, I have to remove the script as a build phase).

With .19, I can't run in the simulator using the main.jsbundle and this is a problem for others that need to run my app. It's also a problem because I can no longer put my app on appetize.io which requires a simulator build (and when running app on appetize.io you can't connect to a react packager).

[tdugger]

Something changed in .19 that causes problem with running in simulator using the main.jsbundle and that is a showstopper for appetize.io, and requires manual code changes to put IP in AppDelegate.m and Info.plist if need to run in simulator.

[geof90]

+1 Is this issue a result of this change? 5f0ef12

I personally think that we should at least be able to do release builds to the simulator running a local JS bundle.

[geof90]

@frantic @skevy Is there a way to introduce a flag in the xcode project and react-native-xcode.sh such that users can toggle bundling the JS and assets when running on the simulator?

I think at the very least, we should always bundle the JS and assets when running a release build. It doesn't seem like a whole lot of sense that a user would run a release build on the simulator and still depend on the dev server, since the goal of running a release build is to test production scenarios.

[skevy]

@frantic I think rather than depending on whether or not we're building for the simulator, we should depend on whether or not we're doing a Debug or Release build (so, check $CONFIGURATION). Thoughts?

[geof90]

@tdugger BTW, does appetize.io require a debug build? (i doubt so, just wanna confirm)

[tdugger]

@geof90 no, appetize.io doesn't require a debug build.

[magus]

Ran into this issue today and it was non-obvious to me, spent a bit of time digging to end up here.

[dabit3]

Having this same issue after upgrading to .18 and also tried .20. __fbBatchedBridge is undefined when using offline bundle, both on simulator and on device.

[dereklyons]

I ran into a similar issue with the __fbBatchedBridge error for different reasons (I accidentally deleted the reference to main.jsbundle from my Xcode project). I believe the error arises when React can't find the main.jsbundle file in your app's main bundle at runtime.

I was able to resolve it as follows:

1. Use the react-native command line to regenerate the main.jsbundle file (note that this command must be run from the root of your react native project).
   $ react-native bundle --entry-file ./index.ios.js --platform ios --bundle-output ios/main.jsbundle
2. Add the generated main.jsbundle back into the Xcode project: File -> Add Files to Project. (After doing this you should verify that main.jsbundle appears in the files listed in the "Copy Bundle Resources" build phase.)
3. Re-build and voila!

[geof90]

I have a PR out that changes the shell script to continue creating the offline package if not in the "Debug" build config, and also updated the comments in the AppDelegate.m template so that this behaviour will be much more obvious to devs in the future

[skizzo]

I can't get my iOS app running with a pre-bundled file. Please take a look at this issue and give me some hints, this is driving me nuts. Thanks.

[akaila]

I don't think this issue is resolved even with react-native version 23 and 25. How is this marked closed? I cannot still run emulator with offline bundle and keep getting fbBatchedBridge undefined error. Can someone re-open this and investigate please?

[akaila]

Moreover this is NOT documented on the docs for running in offline mode. I literally spent one day trying to arrive at this issue.

[dlahyani]

I got the same error with React-Native 0.26 using a remote bundle (i.e. bundle served by the packager on localhost, running the app on simulator of course). When I access the bundle URL via the browser I get the bundled JS file with no problems.

I noticed that the following is printed in Xcode console panel:

2016-06-25 12:51:20.288 [error][tid:com.facebook.react.JavaScript] Error: babelHelpers.typeof is not a function. (In 'babelHelpers.typeof(global)', 'babelHelpers.typeof' is undefined), stack:
http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:24062:61
loadModuleImplementation@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:105:8
guardedLoadModule@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:59:32
_require@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:43:18
http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:23176:8
loadModuleImplementation@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:105:8
guardedLoadModule@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:52:37
_require@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:43:18
global code@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:77434:9
2016-06-25 12:51:20.291 [error][tid:com.facebook.react.JavaScript] Error: Can't find variable: process, stack:
http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:2287:11
loadModuleImplementation@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:105:8
guardedLoadModule@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:59:32
_require@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:43:18
http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:1961:20
loadModuleImplementation@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:105:8
guardedLoadModule@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:59:32
_require@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:43:18
http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:1604:25
loadModuleImplementation@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:105:8
guardedLoadModule@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:59:32
_require@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:43:18
http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:1434:26
loadModuleImplementation@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:105:8
guardedLoadModule@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:59:32
_require@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:43:18
http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:1417:23
loadModuleImplementation@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:105:8
guardedLoadModule@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:59:32
_require@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:43:18
http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:1408:19
loadModuleImplementation@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:105:8
guardedLoadModule@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:52:37
_require@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:43:18
global code@http://localhost:8081/jssrc/index.ios.bundle?platform=ios&dev=true:77436:9
2016-06-25 12:51:21.345 [fatal][tid:main] Unable to execute JS call: __fbBatchedBridge is undefined

So the first line of this chunk of error messages, which says "Error: babelHelpers.typeof is not a function.", made me suspect that this has something to do with Babel. I indeed used Babel for running tests and I noticed that the version of babel-core I added was different then that noted in react-native package.json file. However even when i completely removed babel from my package.json it didn't help. Apparently react-native's package.json had dependency on babel-core@^6.6.4 which causes npm to install babel-core@6.9.1 which seems to be incompatible with version 6.6.4. I admit i am not completely familiar with npm versioning scheme but once I fixed my package.json to require babel-core@6.6.4 it solved the problem.

[custam]

For those like me who may spend a day figuring out why they have the error "Unable to execute JS call: __fbBatchedBridge is undefined" after they upgrade to OS x El Capitan 10.11 with react-native 0.29
When upgrading, the owner of usr/local changes and then the watchman can't run so you have to exec a chown on that folder so that it belongs to you.
Once done, you will be able, in the folder of your project, to start again npm and finally to build your app without this error ;)