React-native: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server. App crash in release build only

[naody]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Done in 2.05s. - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.2, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3, 28.0.0, 28.0.2, 28.0.3
        API Levels: 22, 23, 24, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: 0.57.1 => 0.57.1
    npmGlobalPackages:
      create-react-native-app: 2.0.2
      react-native-cli: 2.0.1

Description

I get the error below on release builds. I don't see the issue in my dev environment i.e. react-native run-android. I installed the apk on my Pixle 2 XL - Android Pi and the app immediately crashes. I got the error below from my Firebase console (Crashlytics)

Fatal Exception: 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.
       at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(CatalystInstanceImpl.java)
       at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:216)
       at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:32)
       at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:243)
       at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1114)
       at com.facebook.react.ReactInstanceManager.access$900(ReactInstanceManager.java:116)
       at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:913)
       at java.lang.Thread.run(Thread.java:764)

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[bartolkaruza]

What command did you use to make the release build? Can you post an (anonimized) copy of your android/app/build.gradle ?

The (default) debug build retrieves the js bundle from the packager at runtime. A release build needs a local version of the bundle in the binary. Your error indicates that this local bundle is not present in the APK.

This can be caused by a misconfigured app/build.gradle, such as pointing to the wrong bundle name or not packaging during the release process all.

[vafada]

@naody

Did you happen to upgrade gradle version?

I got the same issue when I upgraded:

classpath 'com.android.tools.build:gradle:3.2.1'

from

classpath 'com.android.tools.build:gradle:3.1.4'

and

distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip

from

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

[sinhpn92]

I have same issue when upgrade into latest version:
classpath 'com.android.tools.build:gradle:3.2.1'
distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip

-build: cd android & ./gradlew assembleDevRelease -> I have config dev env in gradle.
-env:

Environment:
  OS: macOS 10.14
  Node: 9.8.0
  Yarn: Not Found
  npm: 6.4.1
  Watchman: 4.9.0
  Xcode: Xcode 10.0 Build version 10A255
  Android Studio: 3.2 AI-181.5540.7.32.5056338

Packages: (wanted => installed)
  react: ^16.0.0 => 16.4.1
  react-native: ^0.55.4 => 0.55.4

This issue only have in release build. Debug mode is not.

[naody]

@vafada and @sinhpn92 thanks for pointing out the gradle version I downgraded to com.android.tools.build:gradle:3.1.4 and it started working.

Thanks

[sryze]

I have the same problem when running an app in emulator, downgraded gradle to 3.1.4 but it didn't work.

2018-11-10 19:28:34.949 16195-16214/com.upnest.agent E/AndroidRuntime: FATAL EXCEPTION: Thread-4
    Process: com.upnest.agent, PID: 16195
    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.
        at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
        at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:216)
        at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:32)
        at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:243)
        at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1114)
        at com.facebook.react.ReactInstanceManager.access$900(ReactInstanceManager.java:116)
        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:913)
        at java.lang.Thread.run(Thread.java:764)

My packaging server is running on port 8081 (via react-native start).

Isn't react-native supposed to run the command to build the bundle file automatically? I can't run it manually on every change, it's insane (in particular because the command runs extremely slow).

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
      Memory: 119.93 MB / 16.00 GB
      Shell: 5.6.2 - /usr/local/bin/zsh
    Binaries:
      Node: 11.0.0 - /usr/local/bin/node
      Yarn: 1.12.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.1 => 16.6.1
      react-native: 0.57.2 => 0.57.2
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

In Android Studio the Build Variant option is set to debug for all modules.

Update:

I found a way to automatically run the bundle script: add this to your app/build.grandle:

project.ext.react = [
    entryFile: "index.js",
    bundleAssetName: "index.android.bundle",
    bundleInDebug: true,
    bundleInRelease: true
]

...

// This has to go AFTER you set project.ext.react properties:
apply from: "../../node_modules/react-native/react.gradle"

Apparently the bundleInDebug: true option tells React Native to build bundle files in debug (development) builds.

But this is still not a solution... ideally the app should connect to the packager server running on localhost, but for at least it doesn't do that, sadly I haven't figured out why 😞

Update 2:

Also: https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted/50834600#50834600

[sryze]

For some reason I had import com.facebook.react.BuildConfig; in my MainAplication file (I guess due to some smart ass auto import fixing feature of IntelliJ), and therefore BuildConfig.DEBUG was set to false. Because of this:

    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

React Native was always trying to load index.android.bundle from the app pacakge, not from the dev server. Removing the import com.facebook.react.BuildConfig line fixed the issue for me 🎆 🍺 👍

[react-native-bot]

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[IsraelSouza]

Look at this: https://medium.com/@adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff

[IgorBelyayev]

This worked for me:
https://github.com/facebook/react-native/issues/18357#issuecomment-460015070

In app/build.gradle

Add:

project.ext.react = [
    entryFile: "index.js",
    jsBundleDirRelease: "$buildDir/intermediates/merged_assets/release/mergeReleaseAssets/out"
]

Above the line:

apply from: "../../node_modules/react-native/react.gradle"

[deserthurricane]

I had this issue only on Mac OS and only while trying to build for Android. It started to happen after my update from RN 0.57 to 0.59.

To understand what is going on I started a new RN project and compared differences with my project. I noticed that there is a new folder in the new project - android/app/src/debug. And there is only one file in this folder - AndroidManifest.xml with the following contents:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

After adding this file to my old project Metro Bundler started working for Android as expected.

[vinnyhoward]

For me this combination worked using "react-native": "0.59.4"

• In gradle-wrapper.properties add distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
• in root build.gradle use classpath 'com.android.tools.build:gradle:3.3.0'
• in app build.gradle I have:

project.ext.react = [
        entryFile: "index.js",
        bundleAssetName: "index.android.bundle",
        bundleInAlpha: true,
        bundleInBeta: true
]

right above apply from: "../../node_modules/react-native/react.gradle"

[carneiroDotDev]

Thank you @vinnyhoward ! That worked perfectly for me.

[ajbarry]

Seriously @vinnyhoward Thank you! My release apk has been broken for days and I have been trying everything to get it to include the bundle. Android Studio "strongly recommends" upgrading gradle to 5.1.1 and it looks like that was my problem after all. Cheers! 🍻

[robertying]

It turned out to be a problem of gradle plugin

Use 3.3.* instead of 3.4.* works for me:

classpath 'com.android.tools.build:gradle:3.3.2'

I still use gradle 5.4.1. This does not cause the problem, though.

[MuhammadUsman786786]

@vinnyhoward answer works for me.

[buskerone]

@vinnyhoward solution works for me! Thanks

[cbsom]

@vinnyhoward solution works for me as well.
This saved the few remaining hairs on my head.
No need to change distributionUrl though, gradle-5.1.1-all.zip worked fine.

[MakhouT]

@vinnyhoward That worked for me too.
As @cbsom said, no need to change the distributionUrl
Took me a day to find this.

[Christopotamus]

@deserthurricane This worked for me, also going from ~57 to 59. I missed this step in my diff upgrade!

[aliazizi]

When I change gradle to 3.4
this issue should be repon

[wkmcyz]

For my project using react-native 0.57.0, it is because I upgraded my Android gradle plugin from 3.1.4 to 3.4.1 to enable androidx support libraries. And the new gradle plugin uses a different intermidiate directory for assets, but the react.gradle copies the js bundle into the old directory.

So it builds with js bundle in assets after I changed the react.gradle as below.

// change currentAssetsCopyTask to below.
        def currentAssetsCopyTask = tasks.create(
            name: "copy${targetName}BundledJs",
            type: Copy) {
            group = "react"
            description = "copy bundled JS into ${targetName}."


             // Workaround for Android Gradle Plugin 3.4.1, new asset directory
            from jsBundleDir
            into file(config."jsBundleDir${targetName}" ?:
                "$buildDir/intermediates/merged_assets/${variant.name}/out")


            // mergeAssets must run first, as it clears the intermediates directory
            dependsOn(variant.mergeAssets)

            enabled currentBundleTask.enabled
        }

you can replace the new asset dir with the one your gradle plugin uses if it is not the same(for me it is "$buildDir/intermediates/merged_assets/${variant.name}/out"). You can find it as following.

1. add any file like a.a to your asset directory.
2. run ./gradlew assembleDebug
3. find a.a in ./app/build/intermidiates folder. The folder contains a.a is the intermidiate directory for asset files, change the destination dir in react.gradle to it.

[HeffZilla]

For some reason I had import com.facebook.react.BuildConfig; in my MainAplication file (I guess due to some smart ass auto import fixing feature of IntelliJ), and therefore BuildConfig.DEBUG was set to false. Because of this:

    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

React Native was always trying to load index.android.bundle from the app pacakge, not from the dev server. Removing the import com.facebook.react.BuildConfig line fixed the issue for me 🎆 🍺 👍

This worked for me :)