Any app (incl. default example) crashes with "Can't find variable: React" when launched from a JS bundle on an iOS device

[gnl]

...but works just fine when the JS is compiled+delivered via Figwheel/React Native packager.

Screenshot:

...and Xcode console log:

2016-03-27 01:37:02.578 [error][tid:com.facebook.React.JavaScript] Can't find variable: React
2016-03-27 01:37:02.587 [fatal][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Can't find variable: React
2016-03-27 01:37:02.813 [error][tid:com.facebook.React.JavaScript] Module AppRegistry is not a registered callable module.
2016-03-27 01:37:02.817 [fatal][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Module AppRegistry is not a registered callable module.
2016-03-27 01:37:03.840 [warn][tid:com.facebook.React.JavaScript] Unable to load source map: No source map URL found. May be running from bundled file.
2016-03-27 01:37:03.841 [warn][tid:com.facebook.React.JavaScript] Unable to load source map: No source map URL found. May be running from bundled file.

I'm attaching the main.jsbundle:
main.jsbundle.zip

A readable one can be created with:

node --max-old-space-size=4096 node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev true --bundle-output "ios/main.jsbundle"

Steps to reproduce:

npm install -g re-natal
re-natal init CrashingApp
cd crashing-app
re-natal xcode
lein prod-build

Make sure the JS is delivered from a bundle by editing ios/CrashingApp/AppDelegate.m, commenting this line:

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

and uncommenting this one:

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

Connect device, select it as launch destination in Xcode and hit the run button (after the prod-build process in step 1 is complete).

Expected: app launches after a brief display of a "loading from bundle" status message.
Observed: App crashes with aforementioned exception.

The app works fine on a device and in the simulator when run with:

lein figwheel ios
npm start

(+ reverse step 2 above to disable the bundle).

re-natal version is 0.2.28.

This issue seems like it might be related:
este/este#752

My guess is that the JS compiled with ":optimizations :simple" (as in the default config of the prod-build profile) somehow trips up some optimization/transformation the react native packager does to the JS when creating a bundle.

I tried switching the prod-build leiningen profile to :optimizations :none (as in the working figwheel profile configuration), but then the bundle cannot be created at all, the process dying with the following message:

uncaught error Error: UnableToResolveError: Unable to resolve module env.ios.main from /Users/gnl/Documents/cljs-issue/testcases/test-four/index.ios.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/env.ios.main and its parent directories

Either way, this should work with the default configuration, as it most definitely used to. I'm not quite sure when it stopped, since I was happily developing with Figwheel for more than a week until I tried creating a standalone package to deploy to a device and saw this happen.

Oddly enough, even when downgrading re-natal to 0.2.26 (which I'm pretty sure I used for my last successful packaging) and init-ing a new default project I observe the same behaviour, so not sure which part of the build chain is causing this exactly.

In the same environment, creating a standard RN project with react-native init DemoApp and running on a device from a JS bundle works just fine.

Can anyone else reproduce this?

Thanks!

[drapanjanas]

Hi, thanks for reporting. Reproduced it on iOS and Android using reagent and on-next interfaces
Actually to reproduce I just had to do:

$ re-natal init CrashingApp
$ cd crashing-app
$ react-native run-ios

I am almost sure I check the steps above before each release, but now surprise, this does not work! Latest changes in re-natal were only in figwheel-bridge.js which is not used at all in case of 'lein prod-build'.

But, I could find still working version of luno-react-native app on my local drive (tar.gz is too big to upload here) I have uploaded it to temp storage in the internets: luno-react-native.tar.gz
To successfully run it:

$ tar xvzf luno-react-native.tar.gz
$ cd luno-react-native
$ lein prod-build
$ react-native run-ios

To reproduce the problem:

$ rm -rf node_modules
$ re-natal deps
$ react-native run-ios

This makes me think tat recent NPM cleanup has sometheing to to with this

[drapanjanas]

OK, I am confused, but seems I have found the solution.The problems seems to be with the global variable assignment:

(set! js/React (js/require "react-native"))

which compiles into (which is expected):

React=require("react-native");

But, I guess that now some kind of validation is in place to forbid global assigments like that, huh?

So, the solution/workaround is:

(set! js/window.React (js/require "react-native"))

Instead of window variable GLOBAL also works (which points to window I think)

@gnl can you check and confirm that this workaround works also for you?

[gnl]

Fix confirmed, thank you!