React-native: Unable to load script from assets 'index.android.bundle'.make sure you bundle is packaged correctly.....

Created on 4 Apr 2018  路  49Comments  路  Source: facebook/react-native

Environment:
OS: macOS Sierra 10.12.6
Node: 8.3.0
Yarn: 0.27.5
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.0-alpha.0 => 16.3.1
react-native: 0.55.0 => 0.55.0

Steps to Reproduce

1:react-native init Test
2:cd Test
3:react-native run-andorid
use android virtual genymotion google nexus 6p-7.1.0

Expected Behavior

run normal like ios is ok.

Actual Behavior

if release is ok .
can't load script and can't debug start chrome.

Unable to load script from assets 'index.android.bundle'.make sure you bundle is packaged correctly.....

node

bundle

installsuccess

Android Ran Commands For Stack Overflow Locked

Most helpful comment

I have resolved doing this commands:

// create new project
react-native init awesomeproject

// use react native 0.55.4
npm remove --save react-native
npm i --save [email protected]

npm remove babel-preset-react-native
npm i --save [email protected]

// create folder assets in android\app\src\mainoid
mkdir android\app\src\main\assets

// create the "index.android.bundle" file
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res

// run the app on android device
react-native run-android

Hope to help someone ;)

All 49 comments

@wuyunqiang: can you run adb reverse tcp:8081 tcp:8081 and try again?

@wuyunqiang: try selecting "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.

before I meet this bug,and I "sudo npm start run " will be ok.
and now it's no work.
please help.

@wuyunqiang: move your issue to stackoverflow because this not a bug report and you will get much more chances of help in there.

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.54?

Thank you for your contributions.

This issue looks like a question that would be best asked on Stack Overflow.

Stack Overflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on Stack Overflow.

Why is this issue closed? I am sure this issue is occurring after 0.54.** to 0.55.0 upgrade.

Android Logcat:- java.lang.RuntimeException: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.

after reversing the adb ports, started working in debug mode, but crashing with above error in production.

I run "sudo npm start run" and show
watchman
it's about watchman?
1:npm r -g watchman
2:brew uninstall watchman
3:brew link pcre
4:brew install --HEAD watchman
but no work still bug.

ok I run
1:rm -rf /usr/local/var/run/watchman/root-state
2:react-native start
3:will be ok.

Hi guys. I have the same issue. Here's my logcat output:

screen shot 2018-04-24 at 2 56 15 pm

For IOS:

In a terminal: cd ios

Remove the build folder with: rm -r build

Run again: react-native run-ios

Alternatively, you could open Finder, navigate to YOUR_PROJECT/ios and delete the build folder.

Then run again: react-native run-ios

For ANDROID:

In a terminal: cd android/app

Remove the build folder with: rm -r build

Run again: react-native run-android

Alternatively, you could open Finder, navigate to YOUR_PROJECT/android/app and delete the build folder.

Then run again: react-native run-android

I have tried ALL the answers here, but none work at all. Including removing build folder, clearing watchman, running as sudo, etc.

@darkmantle me neither :(

same problem

same problem here.....

same problem here... RN 0.56.0

I have resolved doing this commands:

// create new project
react-native init awesomeproject

// use react native 0.55.4
npm remove --save react-native
npm i --save [email protected]

npm remove babel-preset-react-native
npm i --save [email protected]

// create folder assets in android\app\src\mainoid
mkdir android\app\src\main\assets

// create the "index.android.bundle" file
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res

// run the app on android device
react-native run-android

Hope to help someone ;)

If you work on the Windows, you should run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res with cmd run as administrator(陌mportant). Thus the problem was fixed :)

this trick "creating assets folder etc" sucks , neither I can not use debugger nor hot reloading ..

thnx ovannigenna, finally i got evaded from this thing. thnx buddy.

If you don't and to keep generating the bundle through command line all the time, you could use the Debbuger mode:

http://facebook.github.io/react-native/docs/debugging#debugging-on-a-device-with-chrome-developer-tools

This would make the Chrome to run the JS:
https://facebook.github.io/react-native/docs/javascript-environment

So a new bundle will be created so the browser can run, and the app will use that bundle.

It seems that the bundle name is changed from index.bundle to index.android.bundle not sure, best you can do is

  • Remove the ios and android folders and react-native eject to recreate those folders.
  • Creating android\app\src\main\assets folder.

There is some relation between, name in package.json, app.json, application Id in build.gradle file, Activity class, and Application class package name, method getMainComponentName()
in MainApplication.java class which returns the component name. Check the names are correct or not. I am not clear how those things work together if anyone can guide me about this, but by making sure the app name in app.json and getMainComponentName() are same, solved my problem.

Not perfect solution for this issue. lots of things are unclear.

RN people need to use the latest versions of android gradle libs, and some info about if not already there, how it generates android project on react-native init, it will be helpful.

If you work on the Windows, you should run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res with cmd run as administrator(陌mportant). Thus the problem was fixed :)

I've tried this countless times but i keep getting this type of error:

Error: Unable to resolve module@babel/runtime/helpers/interopRequireDefaultfromC:\Users\Albert\reactnative apps\test2index.js: Module@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

  1. Clear watchman watches: watchman watch-del-all.
  2. Delete the node_modules folder: rm -rf node_modules && npm install.
  3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
  4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
    at ModuleResolver.resolveDependency (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:209:1301)
    at ResolutionRequest.resolveDependency (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\node-haste\DependencyGraph.js:238:485)
    at Object.resolve (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\lib\transformHelpers.js:180:25)
    at dependencies.map.result (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\DeltaBundler\traverseDependencies.js:311:29)
    at Array.map ()
    at resolveDependencies (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\DeltaBundler\traverseDependencies.js:307:16)
    at C:\Users\Albert\reactnative apps\test2node_modules\metro\src\DeltaBundler\traverseDependencies.js:164:33
    at Generator.next ()
    at step (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\DeltaBundler\traverseDependencies.js:266:307)`

If you work on the Windows, you should run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res with cmd run as administrator(陌mportant). Thus the problem was fixed :)

I've tried this countless times but i keep getting this type of error:

Error: Unable to resolve module@babel/runtime/helpers/interopRequireDefaultfromC:\Users\Albert\reactnative apps\test2index.js: Module@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map

This might be related to #4968
To resolve try the following:

  1. Clear watchman watches: watchman watch-del-all.
  2. Delete the node_modules folder: rm -rf node_modules && npm install.
  3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
  4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
    at ModuleResolver.resolveDependency (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:209:1301)
    at ResolutionRequest.resolveDependency (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\node-haste\DependencyGraph.js:238:485)
    at Object.resolve (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\lib\transformHelpers.js:180:25)
    at dependencies.map.result (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\DeltaBundler\traverseDependencies.js:311:29)
    at Array.map ()
    at resolveDependencies (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\DeltaBundler\traverseDependencies.js:307:16)
    at C:\Users\Albert\reactnative apps\test2node_modules\metro\src\DeltaBundler\traverseDependencies.js:164:33
    at Generator.next ()
    at step (C:\Users\Albert\reactnative apps\test2node_modules\metro\src\DeltaBundler\traverseDependencies.js:266:307)`

it works, try :
npm add @babel/runtime

My project runs in debug mode, but the release apk crashes. The logs have the same error -> Unable to load script from assets 'index.android.bundle'. What should I do to fix this?

The apk was generating fine, until today. I don't see how I caused it.

@km16 me too

@km16 i fixed this.
i use android studio ,not eclipse.assets dir in android studio is android/app/assets,however, in eclipse is android/app/src/main/assets . So move index.android.bundle index.android.bundle.meta from android/app/src/main/assets to android/app/assets. it works for me.
post

I have a problem on creating a release build, since today its not building correctly anymore (I dont know why):

1) Task :app:bundleReleaseJsAndAssets successfully creates the index.android.bundle

PATH..../android/app/build/intermediates/assets/release/index.android.bundle
bundle: Done writing bundle output
bundle: Copying 196 asset files
bundle: Done copying assets

2) but when I install the .apk release file, it is unable to load the bundle file. Because its not in the apk. also the assets (images) are not in the .apk.
How can this happen?

@phips28 The missing bundle may be misleading. I had exactly the same results as you when trying to make google sign-in work. What helped was updating the dependencies to the "newest" version. In my case:

android/app/build.gradle

implementation 'com.google.android.gms:play-services-auth:16.0.1'

android/build.gradle

buildscript {
    // ...
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:4.1.0'
// ...
ext {
    compileSdkVersion   = 26
    targetSdkVersion    = 26
    supportLibVersion   =  "27.1.1"
    googlePlayServicesVersion = "16.0.1"
    androidMapsUtilsVersion = "0.5+"
}

In general, I do not think that it has anything to do with RN itself.

I have spent hours trying to figure this issue out.

Accessing the development server worked locally and in the emulator's browser. The only thing that did not work was accessing the development server in the app.

Starting with Android 9.0 (API level 28), cleartext support is disabled by default.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

See for more info: https://stackoverflow.com/a/50834600/1713216

I have spent hours trying to figure this issue out.

Accessing the development server worked locally and in the emulator's browser. The only thing that did not work was accessing the development server in the app.

Starting with Android 9.0 (API level 28), cleartext support is disabled by default.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

See for more info: https://stackoverflow.com/a/50834600/1713216

Thank you!

@phips28 , @km16 did you guys get any solution?
My app works fine on physical device when debugging over USB but the release apk crashes.
Also this issue appeared for me after doing the react-native-firebase configuration. The major configurations done are in this link below
https://rnfirebase.io/docs/v5.x.x/installation/android

@akshaysargar I updated to the latest RN 0.57 with the new metro bundler. then it worked

@akshaysargar I faced the same problem. Signed app doesn't work on device. I spent a whole day but there is no success yet. I will write when find the soulution.

I caused this to myself by upgrading the gradle to com.android.tools.build:gradle:3.2.1. And that was because of trying to integrate firebase. Solved by upgrading RN to the latest version.

I also lost a lot of time trying to debug the reason. Everything worked perfectly when running with the packager server running, but the application froze on start when running the production build.

In the end I deleted and then re-generated the index.android.bundle file:

$ rm android/app/src/main/assets/index.android.bundle
$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

And then did a clean Gradle build:

$ cd ./android
$ ./gradlew clean && ./gradlew assembleRelease

@mtkopone @phips28 thank you. Problem was solved after updating rn to 0.57.5
@akshaysargar have you tried to update rn?

Yes updated RN to 0.57.5 and finally it worked !!!
This issue took me few days to solve it. I was working on RN 0.55.4 initially but was cautiously updating the RN as I had to take care of lot of dependencies. So just to inform, this issue that we are solving occurs on versions 0.56.0, 0.57.0 but finally I updated to the latest version 0.57.5 and that worked. Thanks @phips28, @mtkopone, @rgaraev

i meet same error with RN 0.57 at log cat of Android studio? i tried all way above but not solution. anyone same me?

i meet same error with RN 0.57 at log cat of Android studio? i tried all way above but not solution. anyone same me?

@phonganhhung9xtb, What version of react native do you have exactly? I updated to 0.57.7 and the problem was solved.

I am having the same issue with 0.57.7. If i add the import com.facebook.react.BuildConfig; to MainApplication.java, the app crashes entirely rather than giving a red screen of death. Same happens if i just return true or false from getUseDeveloperSupport(). I don't think generating the bundle is a valid solution.

I also have same issue. nothing work to me.

Simple as that: https://medium.com/@adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff

Saved my life!

I updated to v0.58.3 I also have same issue now...

2019-02-02 3 42 01
2019-02-02 3 45 45

Simple as that: https://medium.com/@adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff

Saved my life!

Saved lots of my hours too, thanks

adb reverse tcp:8081 tcp:8081

it works for me, thanks.

Was this page helpful?
0 / 5 - 0 ratings