Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android failed to load JS bundle

To bundle JS file into your apk while having your server running (react-native start) download bundle into assets directory of your app:

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

With the next release (0.12) we'll fix react-native bundle command to work with android projects as expected.


The following made it work for me on Ubuntu 14.04:

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

Update: See

  • Running On Device (Android)
  • Device warning suppressed?

Update 2: @scgough We got this error because React Native (RN) was unable to fetch JavaScript from the dev server running on our workstations. You can see why this happens here:

https://github.com/facebook/react-native/blob/42eb5464fd8a65ed84b799de5d4dc225349449be/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java#L116-L137

If your RN app detects that you're using Genymotion or the emulator it tries to fetch the JavaScript from GENYMOTION_LOCALHOST (10.0.3.2) or EMULATOR_LOCALHOST (10.0.2.2). Otherwise it presumes that you're using a device and it tries to fetch the JavaScript from DEVICE_LOCALHOST (localhost). The problem is that the dev server runs on your workstation's localhost, not the device's, so in order to get it to work you need to either:

  • Forward traffic from (Device's localhost):8081/tcp to (Workstation's localhost):8081/tcp. That's what that adb command does.
  • Tell your RN app where it can find your dev server.

Ok, I think I've figured what the issue is here. It was to do with the version of watchman I was running.

In a new shell, run brew update then: brew unlink watchman then: brew install watchman

now, you can run react-native start from your project folder

I leave this shell open, create a new shell window and run: react-native run-android from my project folder. All is right with the world.

ps. I was originally on version 3.2 of watchman. This upgraded me to 3.7.

pps. I'm new to this so that might not be the swiftest route to the solution but it has worked for me.

* MORE INFO FOR RUNNING/DEBUGGING ON A DEVICE *

You might find that if you deploy your app to your Android device rather than an emulater you get a red screen of death with an error saying Unable to load JS Bundle. You need to set the debug server for your device to be your computer running react...either its name OR IP address.

  1. Press the device Menu button
  2. Select Dev Settings
  3. Select Debug server host for device or Change Bundle Location
  4. Type in your machine's IP and Reload JS plus the react port e.g. 192.168.1.10:8081

More info: http://facebook.github.io/react-native/docs/running-on-device-android.html


From your project directory, run

react-native start

It outputs the following:

$ react-native start
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /home/user/AwesomeProject 


React packager ready.

[11:30:10 PM] <START> Building Dependency Graph
[11:30:10 PM] <START> Crawling File System
[11:30:16 PM] <END>   Crawling File System (5869ms)
[11:30:16 PM] <START> Building in-memory fs for JavaScript
[11:30:17 PM] <END>   Building in-memory fs for JavaScript (852ms)
[11:30:17 PM] <START> Building in-memory fs for Assets
[11:30:17 PM] <END>   Building in-memory fs for Assets (838ms)
[11:30:17 PM] <START> Building Haste Map
[11:30:18 PM] <START> Building (deprecated) Asset Map
[11:30:18 PM] <END>   Building (deprecated) Asset Map (220ms)
[11:30:18 PM] <END>   Building Haste Map (759ms)
[11:30:18 PM] <END>   Building Dependency Graph (8319ms)

An easy solution that works for me with Ubuntu 14.04.

react-native run-android

The emulator (already launched) will return: Unable to download JS Bundle; start again the JS server:

react-native start

Hit Reload JS on the emulator. It worked for me. Hope it will help