Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release

问题

react-native run-android terminates by leaving a message in message in android simulator . The message is as follows

Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release.

Am totally confused what's am doing wrong .

---

Edit: Adding an error screenshot

回答1:

You haven't started the bundler yet. Run npm start or react-native start in the root directly of your project before react-native run-android

回答2:

These steps really help me:

Step 1: Create a directory in android/app/src/main/assets

Linux command: mkdir android/app/src/main/assets

Step 2: Rename index.android.js (in root directory) to index.js (Maybe there is an index.js file in which case you do not need to rename it) then run the 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

Step 3: Build your APK: react-native run-android

Please use index.js in lastest version.

Enjoy :)

回答3:

For me this error was caused by an upgrade of react-native

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

If you check out the upgrade diff you need to create a debug manifest android/app/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:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

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

https://react-native-community.github.io/upgrade-helper/

回答4:

You can try the following:

Add this line on your AndroidManifest.xml

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

回答5:

Similar issue happened with me Apparently Mcafee blocks 8081 port, took me hours to figure this out

Try running react-native run-android --port=1234

Once the app shows up with error on the emulator, get into dev settings(accessible by clicking crtl+M)

Change the "Debug server host and port for device" to "localhost:1234"

close the app and start it from the app drawer

hope this helps you too!!

回答6:

if you have everything correctly configured then try this:

adb reverse tcp:8081 tcp:8081

Why? "When the RN packager is running, there is an active web server accessible in your browser at 127.0.0.1:8081. It's from this server that the JS bundle for your application is served and refreshed as you make changes. Without the reverse proxy, your phone wouldn't be able to connect to that address."

all credits to Swingline0

回答7:

After hours searching for a answer. The solution was to make a downgrade node to version 12.4.

In my case I realize that the error just occurs in version react native 0.60 with node version 12.6.

回答8:

just add three splash in : node_modules\metro-config\src\defaults\blacklist.js

replace this part:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

回答9:

I was having the same trouble, the problem for me was that adb was not in the right environment path, the error is telling you metro port, while you're in the adb, ports are killed and restarted.

Add Enviroment Variable (ADB)

1. Open environment variables
2. Select from the second frame PATH variable and click edit option below
3. Click on add option
4. Submit the sdk platform tools path C:\Users\ My User \AppData\Local\Android\Sdk\platform-tools

Note: Or depending where is located adb.exe in your machine

5. Save changes

Run android build again

$ react-native run-android

Or

$ react-native start

$ react-native run-android

回答10:

My solution to this is as below:

Start Metro server

$ react-native start

Start Android

$ react-native run-android

If see errors saying "port 8081 already in use", then you can kill that process and rerun

$ react-native start

See React Native Troubleshooting Page .

回答11:

The solution that worked for me is the following:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
]; 

回答12:

After try to solve this problem in my workspace I found a solution.

This error is because there are a problem with Metro using some combinations of NPM and Node version.

You have 2 alternatives:

• Alternative 1: Try to update or downgrade npm and node version.

• Alternative 2: Go to this file: \node_modules\metro-config\src\defaults\blacklist.js and change this code:

  var sharedBlacklist = [
    /node_modules[/\\]react[/\\]dist[/\\].*/,
    /website\/node_modules\/.*/,
    /heapCapture\/bundle\.js/,
    /.*\/__tests__\/.*/
  ];
  

  and change to this:

  var sharedBlacklist = [
    /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
    /website\/node_modules\/.*/,
    /heapCapture\/bundle\.js/,
    /.*\/__tests__\/.*/
  ];
  

  Please note that if you run an npm install or a yarn install you need to change the code again.

回答13:

IMPORTANT - You might have many Virtual devices in your environment. Ensure if you are changing AVD you repeat the setting again.

DEBUG INFORMATION-

Incase you are experiencing above error you have to 1st verify what is running on port 8081

Quickest way to find that is using following command in terminal

netstat -aon | findstr 8081

if that shows you something it means port is blocked. if possible get that port unblocked.

Otherwise you would need to change the port. The process to do that has already been mentioned in comment above by Naveen Kumar

react-native run-android --port=9001

Ensure 9001 is not used either :)

回答14:

Try the following.

1. Remove Android and IOS folders
2. run react-native eject
3. run react-native run-android

Maybe after the previous steps you have executions npm start - --reset-cache

I work, I hope it helps you.

回答15:

I just want to add a non-obvious possibility not covered here. I am using @react-native-community/netinfo for detecting network changes, primarily network state. To test network-off state, the WIFI switch (on the emulator) needs to be switched off. This also effectively cuts off the bridge between the emulator and the debug environment. I had not re-enabled WIFI after my tests since i was away from the computer and promptly forgot about it when i got back.

There is a possibility that this could be the case for somebody else as well and worth checking before taking any other drastic steps.

回答16:

For me this problem started with upgrading react-native. The upgrade was necessary to add 64-bit support.

Before:
-------- 
Environment:
Node: 10.15.0
npm: 6.9.0
Watchman: 4.9.0
Xcode: Not Found
Android Studio: 3.4 AI-183.6156.11.34.5692245

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ~0.55.2 => 0.55.4
react-native-cli: 2.0.1

After:
------
info 
React Native Environment Info:
Binaries:
Node: 10.15.0
npm: 6.9.0
Watchman: 4.9.0
SDKs:
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.6 => 16.9.0 
react-native: 0.59.9 => 0.59.9 
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1

Also, One important change that I made for the upgrade was in ../android/build/build.gradle

android {
    ...
    defaultConfig {
        ...
        targetSdkVersion 28
        ...
    }
    ...
}

I had to change the targetSdkVersion from 27 to 28 following warning when I tried to upload the build(.apk) to goole play console. Little did i realise that this was the root cause of the above error for me. Immediatly answers by @tom and @tinmarfrutos made absolute sense.

I solved the problem by adding android:usesCleartextTraffic="true" to my android/app/src/debug/AndroidManifest.xml

回答17:

If you are on linux open the terminal from the App root dir and run

npm start

then open another terminal window and run reactive-native run-around

回答18:

possibility of this error is also the wrong path,check once

 export ANDROID_HOME=/Users/microrentindia/Library/Android/sdk/
 export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

回答19:

I have also faced this issue. I resolved this following step.

Check android sdk path in Environment Veritable.

Add ANDROID_HOME = C:\Users\user_name\AppData\Local\Android\Sdk in System Variable
and C:\Users\user_name\AppData\Local\Android\Sdk\platform-tools path in System Variable

replace sharedBlacklist as below code segment,

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

in node_modules/metro-config/src/default/blacklist.js

Then run npx react-native run-android --port 9001

Happy Coding..!

回答20:

do the following steps :

1- Try to downgrade your Node version (current version is 12.13.1)

  choco uninstall nodejs
  choco install nodejs --version 12.8

2-Add the path of npm module (C:\Users\your user name\AppData\Roaming\npm) to system variables instead of user variables

3-Install react native globally by using command

  npm install -g react-native-cli

4- Go to the root of your project directory and run the following command :

  react-native start

5- Open another terminal in the root of your project and run the following command :

   react-native run-android 

回答21:

By default a tiny JavaScript server called "Metro Server" runs on the port 8081.

You need to make this port available for this Server to start. So,

1. release the port
2. close your virtual device
3. "react-native run-android" again.

How to release the port?

http://tenbull.blogspot.com/2019/05/how-to-kill-process-currently-using.html

How to kill the process currently using a port on localhost in windows?

and most importantly, I upgraded my node version from 8.x to 10.x(latest), as suggested by facebook @ https://facebook.github.io/react-native/docs/getting-started

回答22:

I experienced this just because my Wifi was mistakenly turned off on my emulator.i turned it back on and it started working fine. Hope it's helpful to someone

回答23:

If you are running on Linux OS,there might be case where your npm remote server is not running. Open another terminal (with project directory) and run this command sudo npm start or sudo react-native start before doing sudo react-native run-android

回答24:

In my case, I've set a proxy in my emulator. It works back to normal after I removing that proxy.

回答25:

The error message on the emulator is kind of misleading. In my case, I used a Macbook. I needed to change the permissions on android/gradlew by running $ chmod 755 ./gradlew, and then the app could be built and deployed to the android emulator.

回答26:

In Some Cases You Might Want To Close the port Of React-native bundler and Rerun the App With the same process

1.sudo kill -9 $(sudo lsof -t -i:9001)

2.npm start inside the project

3. react-native run-android

回答27:

What worked for me was:

1. close all consoles
2. open a new console
3. $ adb devices
4. make sure you got only one devices connected
5. $ react-native run-android

回答28:

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

This is what you need to do to get rid of this problem if you do normal run commands properly

1. npm install
2. react-native start
3. react-native run-android

And modify your android manifest file like this.

<application
    android:name=".MainApplication"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true" // add this line with TRUE Value.
android:theme="@style/AppTheme">

来源：https://stackoverflow.com/questions/55441230/unable-to-load-script-make-sure-you-are-either-running-a-metro-server-or-that-yo