New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'Unable to download JS bundle' error on Android 5.1 (moto x, second gen) #3130

Closed
oren opened this Issue Sep 30, 2015 · 22 comments

Comments

Projects
None yet
@oren

oren commented Sep 30, 2015

OS: Ubuntu 15.04
node.js: v4.1.1
react-native-cli@0.1.4
Phone: Android 5.1. Moto X(second generation). HW version: P2BF

I am following the quick start tutorial but I can't run the app on my device or on genymotion. I see red screen with 'unable to download JS bundle' any tips?

I tried the following:

  • reverse tcp:8081 tcp:8081 && react-native run-android
  • cd android && ./gradlew :app:installDebug && adb install app/build/outputs/apk/app-debug.apk

Also, one of the requirements is watchman. I tried following the installation steps but failed at ./autogen.sh. I see: ./autogen.sh: 9: ./autogen.sh: aclocal: not found.

@astreet

This comment has been minimized.

Show comment
Hide comment
@astreet

astreet Sep 30, 2015

Contributor

I'm sorry you're having issues, thanks for reporting. Our install docs are only tested on OS X as that's the only platform we support right now (we are hoping to have linux and windows support in the future, possibly with the help of members of the community ;) )

The failing watchman installation is likely the issue here. You would get this error if the JS packager is not running. When you do react-native run-android, do you see a shell spawned that's running the JS packager server? If not, I would try to debug why watchman didn't install/why aclocal isn't installed. aclocal is generally part of GNU autotools/autoconf.

Contributor

astreet commented Sep 30, 2015

I'm sorry you're having issues, thanks for reporting. Our install docs are only tested on OS X as that's the only platform we support right now (we are hoping to have linux and windows support in the future, possibly with the help of members of the community ;) )

The failing watchman installation is likely the issue here. You would get this error if the JS packager is not running. When you do react-native run-android, do you see a shell spawned that's running the JS packager server? If not, I would try to debug why watchman didn't install/why aclocal isn't installed. aclocal is generally part of GNU autotools/autoconf.

@astreet astreet added the Android label Sep 30, 2015

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Sep 30, 2015

Collaborator

It should be adb reverse tcp:8081 tcp:8081 rather than just reverse tcp:8081 tcp:8081 :)

Make sure your device is connected to your computer before running that. The second step cd android && .... should not be necessary -- react-native run-android will do that for you. It probably just wasn't run because reverse is not an actual program so it would not return successfully and the command after && would not be run.

Additionally, watchman is required -- if you can't get that installed then please post to the https://github.com/facebook/watchman repo.

If the issue persists then ping @astreet and myself again and we can look at it, otherwise I'll leave this closed 🌈 ☔️

Collaborator

brentvatne commented Sep 30, 2015

It should be adb reverse tcp:8081 tcp:8081 rather than just reverse tcp:8081 tcp:8081 :)

Make sure your device is connected to your computer before running that. The second step cd android && .... should not be necessary -- react-native run-android will do that for you. It probably just wasn't run because reverse is not an actual program so it would not return successfully and the command after && would not be run.

Additionally, watchman is required -- if you can't get that installed then please post to the https://github.com/facebook/watchman repo.

If the issue persists then ping @astreet and myself again and we can look at it, otherwise I'll leave this closed 🌈 ☔️

@brentvatne brentvatne closed this Sep 30, 2015

@oren

This comment has been minimized.

Show comment
Hide comment
@oren

oren Oct 1, 2015

@astreet @brentvatne
I installed watchman (I had to install automake and python-dev) but I get the same results.
I don't see any js packager server you mentioned above. here are the commands and the output:
(maybe I need to run watchman in a separate terminal?)

adb reverse tcp:8081 tcp:8081
react-native run-android

Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72300Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42300Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee061Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore061Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp061Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0110Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'XT1094 - 5.1'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 30.529 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (adb shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }

oren commented Oct 1, 2015

@astreet @brentvatne
I installed watchman (I had to install automake and python-dev) but I get the same results.
I don't see any js packager server you mentioned above. here are the commands and the output:
(maybe I need to run watchman in a separate terminal?)

adb reverse tcp:8081 tcp:8081
react-native run-android

Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72300Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42300Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee061Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore061Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp061Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0110Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'XT1094 - 5.1'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 30.529 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (adb shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }
@oren

This comment has been minimized.

Show comment
Hide comment
@oren

oren Oct 1, 2015

@brentvatne helped me on the IRC chat. thank you!
'npm start' in one terminal starts packager and in a second terminal ' react-native run-android'.

I would be more than happy to send a PR to add ubuntu section to the docs. is it something you are interested in?

oren commented Oct 1, 2015

@brentvatne helped me on the IRC chat. thank you!
'npm start' in one terminal starts packager and in a second terminal ' react-native run-android'.

I would be more than happy to send a PR to add ubuntu section to the docs. is it something you are interested in?

@jimtang9527

This comment has been minimized.

Show comment
Hide comment
@jimtang9527

jimtang9527 Oct 2, 2015

+1
OS X Yosemite
10.10.5 (14F27)
Phone: Android 4.2.2. Huawei H30-T10

react-native init reactTest
react-native run-android

JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72300Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42300Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee061Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore061Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp061Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0110Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'H30-T10 - 4.2.2'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 24.114 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (adb shell am start -n com.reacttest/.MainActivity)...
Starting: Intent { cmp=com.reacttest/.MainActivity }

but on device
screenshot_2015-10-02-10-43-51

+1
OS X Yosemite
10.10.5 (14F27)
Phone: Android 4.2.2. Huawei H30-T10

react-native init reactTest
react-native run-android

JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72300Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42300Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee061Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore061Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline061Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp061Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0110Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'H30-T10 - 4.2.2'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 24.114 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (adb shell am start -n com.reacttest/.MainActivity)...
Starting: Intent { cmp=com.reacttest/.MainActivity }

but on device
screenshot_2015-10-02-10-43-51

@jinmatt

This comment has been minimized.

Show comment
Hide comment
@jinmatt

jinmatt Oct 3, 2015

adb reverse tcp:8081 tcp:8081 solved the problem

jinmatt commented Oct 3, 2015

adb reverse tcp:8081 tcp:8081 solved the problem

@icoo1985

This comment has been minimized.

Show comment
Hide comment
@icoo1985

icoo1985 Oct 13, 2015

安装apk,可能会出现unable to download js bundle字样
原因:是由于手机和mac没有处在同一个局域网内
解决办法:调整到同一局域网内后,再打开软件内的菜单,选择 Dev Settings -> Debug server host for device,填入你开发电脑的 IP 地址
注:RN 需要启动一个 Dev server 来辅助开发,Android 5.0 可以直接通过 USB 的访问,5.0 以下只能通过 WiFi 来访问。为了便于开发,还是建议实用 5.0 的机器
http://www.icoo.cc/?p=37

安装apk,可能会出现unable to download js bundle字样
原因:是由于手机和mac没有处在同一个局域网内
解决办法:调整到同一局域网内后,再打开软件内的菜单,选择 Dev Settings -> Debug server host for device,填入你开发电脑的 IP 地址
注:RN 需要启动一个 Dev server 来辅助开发,Android 5.0 可以直接通过 USB 的访问,5.0 以下只能通过 WiFi 来访问。为了便于开发,还是建议实用 5.0 的机器
http://www.icoo.cc/?p=37

@jimtang9527

This comment has been minimized.

Show comment
Hide comment
@YoungElPaso

This comment has been minimized.

Show comment
Hide comment
@YoungElPaso

YoungElPaso Oct 13, 2015

Also, I tried the Wathman install/uninstall route, with not much luck. What did work was making sure I updated and changed the version of node as used by nvm.

e.g. nvm install 4.1.1

Also, I tried the Wathman install/uninstall route, with not much luck. What did work was making sure I updated and changed the version of node as used by nvm.

e.g. nvm install 4.1.1

@divyenduz

This comment has been minimized.

Show comment
Hide comment
@divyenduz

divyenduz Oct 21, 2015

Contributor

adb reverse tcp:8081 tcp:8081
solved the problem for me.

Contributor

divyenduz commented Oct 21, 2015

adb reverse tcp:8081 tcp:8081
solved the problem for me.

@almeynman

This comment has been minimized.

Show comment
Hide comment
@almeynman

almeynman Oct 26, 2015

when running adb reverse tcp:8081 tcp:8081 I get

error: closed
error: closed

I also uninstalled/installed watchman and I am using node v4.2.1

when running adb reverse tcp:8081 tcp:8081 I get

error: closed
error: closed

I also uninstalled/installed watchman and I am using node v4.2.1

@rock007

This comment has been minimized.

Show comment
Hide comment
@rock007

rock007 Nov 5, 2015

me too

solve it,

cmd react-native start ,start htttp server

rock007 commented Nov 5, 2015

me too

solve it,

cmd react-native start ,start htttp server

@xwenliang

This comment has been minimized.

Show comment
Hide comment
@xwenliang

xwenliang Nov 17, 2015

@hway It worked for me,thanks

@hway It worked for me,thanks

@gefangshuai

This comment has been minimized.

Show comment
Hide comment

mark!

@leonard0629

This comment has been minimized.

Show comment
Hide comment
@leonard0629

leonard0629 Jan 4, 2016

i met the same problem on HUAWEI H60, and after reinstall the watch and "react-native run-android", i got the right index page.

"brew uninstall watchman"
"brew install watchman"
cd to the project root path
"react-native run-android"

i met the same problem on HUAWEI H60, and after reinstall the watch and "react-native run-android", i got the right index page.

"brew uninstall watchman"
"brew install watchman"
cd to the project root path
"react-native run-android"

@sairam

This comment has been minimized.

Show comment
Hide comment
@sairam

sairam Jan 13, 2016

this worked for me on 4.4.4 -

re-installing "watchman"
adb start-server
react-native run-android

sairam commented Jan 13, 2016

this worked for me on 4.4.4 -

re-installing "watchman"
adb start-server
react-native run-android

@tristangodfrey

This comment has been minimized.

Show comment
Hide comment
@tristangodfrey

tristangodfrey Feb 4, 2016

Not sure if this requires me making a new issue, but running on react-native 0.16 my device is failing to connect to the development server. (after setting up host ip in debug settings) I checked out wether any requests were coming in with WireShark, and they are. Firewall is turned off completely on my mac.

Does anyone have any idea what else could be causing this issue? Packager is running and isn't logging anything on request.

Not sure if this requires me making a new issue, but running on react-native 0.16 my device is failing to connect to the development server. (after setting up host ip in debug settings) I checked out wether any requests were coming in with WireShark, and they are. Firewall is turned off completely on my mac.

Does anyone have any idea what else could be causing this issue? Packager is running and isn't logging anything on request.

@xuecat

This comment has been minimized.

Show comment
Hide comment
@xuecat

xuecat Feb 24, 2016

@almasakchabayev me too.And are resolved it???

xuecat commented Feb 24, 2016

@almasakchabayev me too.And are resolved it???

@haitang3009

This comment has been minimized.

Show comment
Hide comment
@haitang3009

haitang3009 Apr 24, 2016

Hello there,

I have fixed this issue by the step below:

if your machine do not install McAfee antivirus, please go to step 2

if you installed McAfee antivirus, the default port of McAfee log is 8081. You should manual change the port of your react native server

Step 1: go to \node_modules\react-native\local-cli\server\server.js and change the port 8081 to 8088

const args = parseCommandLine([{

command: 'port',

default: 8088,

type: 'string',

}

Step 2: Create an "assets" folder under "android/app/src/main"

Step 3: in node.js run "react-native start" and navigate to the url
p/s: do not install McAfee antivirus please go with port 8081

"http://localhost:8088/index.android.bundle?platform=android"

Step 4: save the bundle to assets folder and you are all set. in node.js run "react-native run-android" to view the result

Regards,

Hai Tang

Hello there,

I have fixed this issue by the step below:

if your machine do not install McAfee antivirus, please go to step 2

if you installed McAfee antivirus, the default port of McAfee log is 8081. You should manual change the port of your react native server

Step 1: go to \node_modules\react-native\local-cli\server\server.js and change the port 8081 to 8088

const args = parseCommandLine([{

command: 'port',

default: 8088,

type: 'string',

}

Step 2: Create an "assets" folder under "android/app/src/main"

Step 3: in node.js run "react-native start" and navigate to the url
p/s: do not install McAfee antivirus please go with port 8081

"http://localhost:8088/index.android.bundle?platform=android"

Step 4: save the bundle to assets folder and you are all set. in node.js run "react-native run-android" to view the result

Regards,

Hai Tang

@ShekarMania

This comment has been minimized.

Show comment
Hide comment
@ShekarMania

ShekarMania Jun 23, 2017

@brentvatne
I have Successfully Installed React Native App ,in My Default Android Studio Emulator but It is not Working in My Physical Device.
I Changed the Port to 8081 by Executing $adb reverse tcp:8081 tcp:8081 command.
Then it Started working in My Physical Device but it Stopped Working in Android Studio Default Emulator.
I Wanted to Change From Physical Device to Emulator. What Can I Do?
Please Help. Thanks

ShekarMania commented Jun 23, 2017

@brentvatne
I have Successfully Installed React Native App ,in My Default Android Studio Emulator but It is not Working in My Physical Device.
I Changed the Port to 8081 by Executing $adb reverse tcp:8081 tcp:8081 command.
Then it Started working in My Physical Device but it Stopped Working in Android Studio Default Emulator.
I Wanted to Change From Physical Device to Emulator. What Can I Do?
Please Help. Thanks

@facebook facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.