ChatGPT解决这个技术问题 Extra ChatGPT

Unable to load script from assets index.android.bundle on windows

I'm trying to run my first React Native project for first time on my device (Android 4.2.2).

And I get:

unable to load script from assets index.android.bundle

Commands that I used:

cd (project directory) react-native start react-native run-android

Before trying jerry's answer first check have u set ANDROID_HOME in environment variable and in path platform-tool.
It's a bug in the recent version. You have to use the previous version by using react-native init ProjectName --version=0.55.4 The problem should be fixed.
same error, same context, but the fix is easy: wait for the debug server to change from Loading dependency graph... to Loading dependency graph, done and hit reload on the app.
The accepted answer is an extremely inconvenient hack, that complicates the build process and the code base. There are better answers here.
Use mkdir ... /assets && react-native bundle --platform.. CAN NOT solve this problem completely,check this: stackoverflow.com/a/55511803/10139109

M
Muhammad Atallah

I've encountered the same issue while following the React Native tutorial (developing on Linux and targeting Android).

This issue helped me resolve the problem in following steps.

(in project directory) mkdir android/app/src/main/assets 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 react-native run-android

You can automate the above steps by placing them in scripts part of package.json like this:

"android-linux": "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 && react-native run-android"

Then you can just execute npm run android-linux from your command line every time.


what if we want to modify the file index.android.js ? every time in terminal we have to insert command react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
it will get stuck at Loading dependency graph... every time when I rerun it from terminal and it takes too much time. FYI I am using ubuntu 14.04
React native newer versions doesn't contain index.android.js, Hence please use App.js with the command. :) Thanks
@ChinthakaDinadasa in my case, it's index.js, not App.js
This guy needs a statue! I mean it really worked not only on linux but on windows 10 too
A
Axel

If You are running your application on physical device and getting this error

unable to load script from assets index.android.bundle

try running the command:

adb reverse tcp:8081 tcp:8081

It workd for Me...


This fixed my issue! Thanks!
Worked for me. For those who dont have the android platform tools on your terminal path in windows, the adb executable is in `C:\Users\YourUser\AppData\Local\Android\sdk\platform-tools`
I think this should be the correct answer, the other one seems like a hack.
This fixed the issue for me (Windows, running app on physical device). It's one of the suggested fixes on the red error box.
It works for me on macOS, but I have to run this every time I replug the device. Is there any way to make this permament?
n
neurosnap

I spent hours trying to figure this issue out. My problem was not specific to Windows but is specific to Android.

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. This was my issue after upgrading targetSdkVersion to 28.
This is the correct answer. It actually fixes the network communication problem.
This is the solution used in React Native v0.59.2.
Thanks for flagging this - was completely preventing my RN app from loading. Disappointing that there wasn't better error messaging around this :/
It's shocking how all the different answers here seem to solve exactly the same error message. Making debugging even more time consuming and painful. This answer here worked for me! Thanks @neurosnap
I
IgorGanapolsky

Using npm version 4.3.0 react-native-cli version 2.01 react-native version 0.49.5

In the project directory,

mkdir android/app/src/main/assets

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

react-native run-android

The file name has changed from index.android.js to index.js


Kinda sad that FB releases a new version, and instead of fixing this bug - which is clearly hitting tons of people - they break the accepted work-around!
@IgorGanapolsky Make sure you have an index.bundle file in your assets folder
@DarshanPania What does that file do?
@IgorGanapolsky That JS file is an entry point into your app. From RN 0.49 onwards there is only one file index.js instead of index.android.js or index.ios.js
for linux : sudo 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
M
Milon

I have faced the same problem with a real android device.

Solution: Based on this answer by Niltoid

Find your local IP Open app and shake your Android device Go Dev Setting and>Debug Server... Paste your IP and port; X.X.X.X:8088" (where X's are your local IP)

for Mac user: open your network preference, here you will get your local IP.


Works for me (y)
L
Led Machine

If you are using Windows run the commands in the following way, or if you get an error "Cannot find entry file index.android.js"

mkdir android\app\src\main\assets 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 react-native run-android


S
Srinivas

Had the same issue in mac, After spending 2 days i was finally able to get is working.

Since Emulator cellular data was turned off, I was getting the unable to load script from assets index.android.bundle make sure your bundle is running.

Make sure your Emulator cellular data is turned on by doing this package server was able to bundle index.android.js. Hope it helps for someone who is in development phase.


What do you maen Emulator cellular data is turned on? Where is that? Virtual device? Real device?
Emulator means Virtual device that comes from android studio.
Thank you, for some odd reason, my emulator got corrupted and wifi is gone. saved me.
D
David Liu

You can follow the instruction mentioned on the official page to fix this issue. This issue occur on real device because the JS bundle is located on your development system and the app inside your real device is not aware of it's location.


I was getting this problem when running directly from android studio. using react-native run-android fixed it
Your link does not work anymore, you should reference key helpful parts in future to keep information alive after its source dies.
So how to run this on a real device??
@IgorGanapolsky i have the same issue and fixed it with official documentation, you can easily check your environment facebook.github.io/react-native/docs/running-on-device.html I can't load porj from android studio (and android folder) but i could do it with root folder of project and terminal.
By the way the link is expired given in the answer .. Fyi.
J
Jesse Onolemen

I've had this same issue for a number of months now. I initially used @Jerry's solution however, this was a false resolution as it didn't fully fix the problem. Instead, what it did was take every build as a production build meaning that any slight change you made in the app would mean that rebuilding the entire app is necessary.

While this is a temporal solution, it works horribly in the long term as you are no longer able to avail of React Native's amazing development tools such as hot reloading etc.

A proper solution is a shown:

In your MainApplication.java file, replace the following:

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

with

@Override
public boolean getUseDeveloperSupport() {
    return true;
}

as for some reason BuildConfig.DEBUG always returned false and resulted in a bundle file in the assets directory.

By manually setting this to true, you're forcing the app to use the packager. This WON't work in production so be sure to change it to false or the default value.

Don't forget also to run

$ adb reverse tcp:8081 tcp:8081

Holy, this is the actual solution. The accepted answer does not work for hot reloading and is in no way a legitimate fix to the issue.
This should be the answer! Been whole night trying to fix this with no luck. Thanks, Jesse! Btw, where is the BuildConfig.DEBUG value stored actually?
Maybe this is the reason: stackoverflow.com/questions/36350932/…
m
mukeshmandiwal

1 Go to your project directory and check if this folder exists android/app/src/main/assets

If it exists then delete two files viz index.android.bundle and index.android.bundle.meta If the folder assets don't exist then create the assets directory there.

2.From your root project directory do

cd android && ./gradlew clean

3.Finally, navigate back to the root directory and check if there is one single entry file calledindex.js

If there is only one file i.e. index.js then run following command 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

If there are two files i.e index.android.js and index.ios.js then run this react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res Now run react-native run-android

Now run react-native run-android


after trying nearly all of these scenarios... this was the only solution that worked for me. Thank you!!!!
This worked for me after running into this error following the get started guide on Ubuntu 18.04. Thanks!
J
Jew

OS: Windows

Another way to resolve this problem after trying two methods above (because I installed SDK not in DEFAULT LOCATION like C:\users\"user_name"\appdata\local\sdk)

If you noticed that command line announced: "'adb' is not recognized as an internal or external command..."

So this is how I get over: Examples: I installed SDK in D:\Android\sdk So I will insert path in System Variables 2 more lines:

D:\Android\sdk\tools  
D:\Android\sdk\platform-tools  

(If you don't know how to edit path System Variables, here's the topic: https://android.stackexchange.com/questions/38321/what-do-i-type-in-path-variable-for-adb-server-to-start-from-cmd/38324)

Then I run cmd again: react-native run-android

It worked for me.


even though it is not really connected - this is one of the very common problems and it works as Thien described
P
Poonam

In my case, I have removed below line from MainApplication.java. (Which is previously mistakenly added by me.):-

import com.facebook.react.BuildConfig;

After that Clean Project and hit command

react-native run-android


Thanks, its also helps me.
K
Keet Sugathadasa

I was also facing this problem because when I run projects on the emulator its working fine but on a real device it gives this error. So I resolve this problem by the following solution

1st step: First of all open cmd and go to your SDK manager Platform-tools folder

cd C:Development\Android\Sdk\Platform-tools

2nd step: now run this command :

adb devices

after this command check your device listed in command prompt

3rd step: now run this

adb reverse tcp:8081 tcp:8081

Now your setup is done

4th step: Go to your project directory and run this command

react-native run-android

G
Gurbela

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


Works for Android! clean and easy!
Deleting android/app/bin folder on Windows worked as well. I had built it the project directly from Android Studio, instead of running react-native run-android, and it seems it built something wrong that I had to delete manually.
C
Chheng Chansopheaktra

For this problem I just solve it by running:

react-native start

then

adb reverse tcp:8081 tcp:8081

on command line. And then i can run:

react-native run-android

So i will not waste my time to 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

every time.


H
Harat

Ubuntu

first time, I created new app with react-native init project-name. I got the same error. so i do the following steps to resolve this in my case.

Firstly run sudo chown user-name-of-pc /dev/kvm in my case. While debugging from your Android phone, select Use USB to Transfer photos (PTP). Create Folder assets in project-name/android/app/src/main make sure index.js be avaiable into your project root directory and then run below command from console after cd project-name directory.

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

or for index.android.js then

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

run command ./studio.sh in android-studio/bin directory. It will opens up Android Studio. run command react-native run-android.

https://i.stack.imgur.com/16TBn.jpg


d
dytra

Make sure metro builder is running to make your physical device and server sync

First, run this command to run metro builder

npm start

Then you can start the build in react native

react-native run-android

Their should be no error this time. If you want your code to be live reload on change. Shake your device and then tap Enable Live Reload


m
mchouhan_google

Make sure that you have added /path/to/sdk/platform-tools to your path variable.

When you run react-native run-android, it runs adb reverse tcp:< device-port > tcp:< local-port > command to forward the request from your device to the server running locally on your computer. You will see something like this if adb is not found.

/bin/sh: 1: adb: not found
Starting the app (.../platform-tools/adb shell am start -n 
com.first_app/com.first_app.MainActivity...
Starting: Intent { cmp=com.first_app/.MainActivity }

this should be right up to most upvoted answers, as should be one of the first things to check
L
Lindoélio Lázaro

It may be caused by unlinked assets in your React Native project code base, like when you renames your project application/bundle id or adds an external package without link it properly, for example.

Simply try it in your project root directory:

react-native link

react-native run-android

j
jsbeckr

This problem also happens if you define an android:networkSecurityConfig in your main AndroidManifest.xml. The android:usesCleartextTraffic="true" in your debug AndroidManifest.xml will be ignored.

To fix this issue, you have to configure the app to allow http traffic to localhost.

Create a file android/src/debug/res/xml/network_security_config.xml:

<?xml version="1.0" encoding="utf-8" ?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

And reference it in android/src/debug/AndroidManifest.xml:

<?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:networkSecurityConfig="@xml/network_security_config" 
        tools:targetApi="28" 
        tools:ignore="GoogleAppIndexingWarning" />
</manifest>

Further infos here: https://medium.com/astrocoders/i-upgraded-to-android-p-and-my-react-native-wont-connect-to-my-computer-to-download-index-delta-42580377e1d3


That's correct. This happens after I have set network config file for some domains. So we also need to set localhost. Thank you.
m
mp31415

If when running react-native run-android command the second line of the trace is

JS server not recognized, continuing with build...

it means packager for the app cannot be started and the app will fail to load without some extra steps. Note that the end of the trace still reports success:

BUILD SUCCESSFUL

The problem is probably some port conflict (in my case it was the default IIS site that I completely forgot about). Another manifestation of the problem would be a failure to open http://localhost:8081/debugger-ui URL in Chrome.

Once the port conflict is resolved the trace will report

Starting JS server...

then an additional Node window will open (node ...cli.js start) and the app will load/reload successfully.

After that you should be able to open debug console in Chrome with http://localhost:8081/debugger-ui.


n
nimgrg

I had the same issue even when running on a simulator. I did a quick workaround so that I could have the normal dev workflow.

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  @Override
  public boolean getUseDeveloperSupport() {
    // return true here to load JS from the packager
    // BuildConfig.DEBUG for me was set to false which meant it
    // it was always trying to load the assets from assets folder.
    return true;
  }

  @Override
  protected String getJSMainModuleName() {
    return "index";
  }
};

Probably will have to revert the change when trying to do a production build.


佚名

I had issue with McAfee on my mac blocking port 8081, had to change it to 8082.

First run your package server:

react-native start --port 8082

Open another terminal, start the android app as usual:

react-native run-android

Once it finishes, now rewrite the tcp port that adb tunnels:

adb reverse tcp:8081 tcp:8082

See the list of adb tcp tunnels:

adb reverse --list

You should now see a heartwarming message:

(reverse) tcp:8081 tcp:8082

Go to your app and reload, done!

PS: Don't change anything in the app Dev settings, if you added "localhost:8082", just remove it, leave it blank.

EDIT: To all the McAfee victims out there, there's easier solution if you have root access, just temporarily kill the McAfee process sitting on port 8081 and no need for port change at all:

sudo launchctl remove com.mcafee.agent.macmn

S
Sudhanva Patil

I think you don't have yarn installed try installing it with chocolatey or something. It should be installed before creating your project (react-native init command).

No need of creating assets directory.

Reply if it doesn't work.

Edit: In the recent version of react-native they have fixed it. If you want complete freedom from this just uninstall node (For complete uninstallation Completely remove node refer this link) and reinstall node, react-native-cli then create your new project.


N
Nguyễn Phúc

don't forget turn on internet in emulator device, I resovled this error, it work perfect :V I get this error because i turn off internet to test NetInfo :D


s
sumit kumar pradhan

This is a general error message, you may have encountered during the react native application development. So In this tutorial we are going to provide solution to this issue.

Issue Description : Unable to load script from assets index.android.bundle on windows Unable to load script from assets index.android.bundle on windows

Follow the below steps to solve above issue :

Step-1 : Create "assets" folder inside your project directory Now create assets folder inside the project directory that is "MobileApp\android\app\src\main". You can manually create assets folder :

< OR >

you can create folder by using command as well. Command : mkdir android/app/src/main/assets

Step-2 : Running your React Native application Lets run the below command to run the react native application in emulator or physical device.

Switch to project directory. cd MobileApp

Run the below command that helps to bundle you android application project.

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 Final step to run react native application in emulator or physical device. react-native run-android

< OR >

Also you can combine last two command in one, In this case case you have to execute command only once.

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 && react-native run-android

< OR >

You can automate the above steps by placing them in scripts part of package.json like this:

"android-android": "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 && react-native run-android"

If everything is set up correctly, you should see your new app running in your Android emulator shortly.


b
bhw1899

I have just encounterred exactly the same problem and solved it. So hope to be helpful.

Suppose you are assemblling a release application package (.apk)

Check if your assets folder exist?: \android\app\src\main\assets If not, create one. After executing "Assemble Release", check if there is anything in that folder(\android\app\src\main\assets) If not, find js bundle file(index.android.bundle), which should be in more than one of the following paths: *a)\android\app\build\intermediates\merged_assets\release\out\index.android.bundle b)\android\app\build\intermediates\merged_assets\release\mergeReleaseAssets\out\index.android.bundle c)\android\app\build\intermediates\assets\release\index.android.bundle d)\android\app\build\generated\assets\react\release\index.android.bundle*

A better way is to use "Everything" to search the file name: index.android.bundle.

Then copy this file into your assets folder(\android\app\src\main\assets\index.android.bundle) Go back to powershell or command console, execute:

react-native run-android --variant=release

It should work.

Good luck!


Thank you very much! Struggled for three days! Btw react native 0.59 fixed the issue.
D
Danish Hassan

I have spent half a day figuring this issue...

If you are using the API target version Above 28.0.0 then you may face this issue.

Just add this line

android:usesCleartextTraffic="true"

in your Manifest Application block.

Manifest Application block code.

 <application
        ....
        android:usesCleartextTraffic="true"
.../>

A
Ahmad Khani

Actually, in my situation (React-native version 0.61.5 and trying to install debug APK on device) none of the answers helped me, my solution was adding bundleInDebug: true to android/app/build.gradle like this:

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,  // clean and rebuild if changing
    bundleInDebug: true
]

Thank you, it solved the issue But now I can't use fast refresh option
thanks - is this still relevant - 2022? expo doesn't use this project.ext.react and things change....
c
chii

when I update react-native to 0.49.5, this problem appears and when I followed this Breaking changes and deprecations

it disappeared.