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
ReactjsReact NativeReact Native-AndroidReact Native-CliMetro BundlerReactjs Problem Overview
Reactjs Solutions
Solution 1 - Reactjs
You haven't started the bundler yet. Run npm start
or react-native start
in the root directory of your project before react-native run-android
.
Solution 2 - Reactjs
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 latest version.
Enjoy :)
Solution 3 - Reactjs
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 .
Solution 4 - Reactjs
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
Solution 5 - Reactjs
A 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
When app shows up with an error on emulator, get into dev settings (Ctrl+M).
Change the "Debug server host and port for device" to "localhost:1234".
Close the app and start it from the app drawer.
Solution 6 - Reactjs
You can try the following:
Add this line on your AndroidManifest.xml
<application
[...]
android:usesCleartextTraffic="true"
/>
[...]
</application>
EDIT:
Be careful, it must be false
on production for the security of your app
Solution 7 - Reactjs
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__\/.*/
];
Solution 8 - Reactjs
First do steps 4 and 5 then you can run your project. If you do not get the result (with steps 4 and 5) 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
EDIT :
You are using Genymotion ? If yes, do the following step :
After above step if you get the following error ?
error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
Open your genymotion and go to :
genymotion menu -> Settings -> ADB -> Then select use custom android sdk tools (click on browse to find sdk location)
Finally , run you project again ..
Solution 9 - Reactjs
#[Quick Answer]
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 ayarn install
you need to change the code again.
Solution 10 - Reactjs
This worked for me after trying several ways.
In the file node_modules\metro-config\src\defaults\blacklist.js
Replace :
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
with :
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
hope this helps.
Solution 11 - Reactjs
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. Run following commands in the below sequence:
- (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.
Solution 12 - Reactjs
In my case, the emulator's Wifi and Mobile Data was off.
Solution 13 - Reactjs
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
- npm install
- react-native start
- 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">
Solution 14 - Reactjs
If you are on linux open the terminal from the App root directory and run
npm start
then open another terminal window and run:
react-native run-android
Solution 15 - Reactjs
Like most of us I assume you are running on VSCODE. In my case, I ran
> npx react-native start
from a seperate terminal
Now run npx react-native run-android from your terminal in VSCODE
Solution 16 - Reactjs
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
Solution 17 - Reactjs
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.
Solution 18 - Reactjs
Hey guys a combination of 2 awnsers solved my problem. It was port related.
adb reverse tcp:8088 tcp:8088
react-native run-android --port=8088
By doing this, the app loaded fine of my phone connected by USB. I think my AV or Vagrant or something elses in my PC was using that port.
You can change 8088 to something else if needed.
Enjoy!
Solution 19 - Reactjs
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.
Solution 20 - Reactjs
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..!
Solution 21 - Reactjs
Apparently, none of the answers fixed the issue for me. I was able to run the react-native app on emulator but the same code (even when the Server was running), gave me this error when running the app on the device.
I was able to resolve it by executing the following command in the terminal:
adb reverse tcp:8081 tcp:8081
Solution 22 - Reactjs
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)##
- Open environment variables
- Select from the second frame PATH variable and click edit option below
- Click on add option
- 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
- Save changes
Run android build again
$ react-native run-android
Or
$ react-native start
$ react-native run-android
Solution 23 - Reactjs
In my case, I've set a proxy in my emulator. It works back to normal after I removing that proxy.
Solution 24 - Reactjs
I'm sure it some combination of the other things mentioned here like allowing clear text, which I enabled for localhost. But this was the final piece in the puzzle.
project.ext.react = [
entryFile: "index.js",
// ADD THESE THREE
bundleAssetName: "index.android.bundle",
bundleInDebug: true,
bundleInRelease: true
]
RN: 0.61.3
Solution 25 - Reactjs
Here how I solved this issue without touching the build:
1- Closed the Virtual Device
2- Tested on Physical Device --(it works)
3- Created new Virtual Device with API 30 Android 10+
4- Try again on newly created Virtual Device, and all work like a charm.
Solution 26 - Reactjs
In my case I was trying to run the application on the emulator. But, I was getting this
This IP 10.0.2.2 was accessible from emulator chrome browser. The issue is that this IP is not whitelisted in Android Network Security Settings. So, whatever IP Address you are seeing here add that in below settings and you are good to go.
./android/app/src/main/AndroidManifest.xml
<application
android:name=".MainApplication"
+ android:usesCleartextTraffic="true" <- Add this line
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
./android/app/src/main/res/xml/network_security_config.xml
</network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
<domain includeSubdomains="true">10.0.1.1</domain>
<domain includeSubdomains="true">10.0.2.2</domain>
<domain includeSubdomains="true">10.0.3.2</domain>
</domain-config>
</network-security-config>
Just replace <domain includeSubdomains="true">10.0.2.2</domain>
with the IP you are shown in the error from react-native.
Solution 27 - Reactjs
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
Solution 28 - Reactjs
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
Solution 29 - Reactjs
The solution that worked for me is the following:
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
Solution 30 - Reactjs
update this part in metro blacklist
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
Solution 31 - Reactjs
Try These steps if you have tried everything mentioned in above solutions:
- Create File in android/app/src/main/assets
- 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
- Now run your command to build for e.g. react-native run-android
Solution 32 - Reactjs
I have run into similar issue. npx react-native init
creates .gitignore file which ignores <project>/android/app/src/debug
folder. If you have later cloned this project, this folder would be missing.
The solution is simple. In future add this line to the bottom of the .gitignore file.
!android/app/src/debug
For your current project ask the project creator to commit this folder. I have encountered this error with react native version 0.63
Solution 33 - Reactjs
-
In my case I just close the app form emulator
-
Then run this again
> react-native run-android
Solution 34 - Reactjs
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 the following command in terminal
netstat -aon | findstr 8081
if that shows you something it means the 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 the comment above by Naveen Kumar
react-native run-android --port=9001
Ensure 9001 is not used either :)
Solution 35 - Reactjs
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,
- release the port
- close your virtual device
- "react-native run-android" again.
How to release the port?
http://tenbull.blogspot.com/2019/05/how-to-kill-process-currently-using.html
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
Solution 36 - Reactjs
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
Solution 37 - Reactjs
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.
Solution 38 - Reactjs
This is caused whenever the android device cannot reach the metro server. If the above doesn't work, check to see that your android device doesn't have a proxy configured. (Settings > Proxy > No Proxy).
Solution 39 - Reactjs
This error appeared out of nowhere for me and what solved it for me was:
-
AVD manager in Android Studio
-
Press arrow down under Actions on your virtual device
-
Wipe data
-
Restart Metro
Solution 40 - Reactjs
Run the follwoing two commands
adb kill-server
adb start-server
After that, run the command npm start
followed by the usual green run button in Android studio.
Solution 41 - Reactjs
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
Solution 42 - Reactjs
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
Solution 43 - Reactjs
What worked for me was:
- close all consoles
- open a new console
$ adb devices
- make sure you got only one devices connected
$ react-native run-android
Solution 44 - Reactjs
you can also downgrade node js to version less than 12 and remove nodemodule then run npm install again
Solution 45 - Reactjs
I did: react-native start and npx react-native run-android.
However, for Min19, (Ubuntu based) I was having the same problem until I run:
echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
From: https://reactnative.dev/docs/troubleshooting#content
At least I got the app running in my cell phone.
Solution 46 - Reactjs
I got the same issue, after following the following steps, it got resolved the issue
- Clear watchman watches:
watchman watch-del-all
. - Delete the node_modules folder:
rm -rf node_modules && npm install
. - Reset Metro Bundler cache:
rm -rf /tmp/metro-bundler-cache-*
- Remove haste cache:
rm -rf /tmp/haste-map-react-native-packager-*
Solution 47 - Reactjs
I had the same issue. But this method solved it.
Go to the android folder using
cd android
then gradlew clean
or ./gradlew clean
whichever works for your os.
Solution 48 - Reactjs
I had try all solution below commented and answered by different people. Some Times it work but some times no one solution works for me..... best solution for this error uninstall APK from physical device and and run app once again ...its work for me 100% !!!
step 1-
> Uninstall APK
from physical Device
step 2-
> Go to Android folder cd android
step 3-
> Enter Command Gradlew Clean
step 4-
> Enter Cd..
back to Project
step 4-
> Run Command npx react-native run-android
OR react-native run-android
Solution 49 - Reactjs
Possibly your port is taken. Try running on different port:
adb reverse tcp:6666 tcp:6666
react-native run-android --port 6666
check if port you are using is free
linux:
lsof | grep LISTEN
windows:
netstat -an
Solution 50 - Reactjs
Please check if the metro server is running any other ports. If any, stop all servers then restart the server, and try it again.
Solution 51 - Reactjs
Solution 52 - Reactjs
this works for me on ubuntu
1. if you are having node version 17 first downgrade its version:-
You can use n for node's version management.
this is very easy to use.
$ npm install -g n
then you can show your node version:
$ node -v
v16.13.2
2. create an assets folder inside root of the project:-
project\android\app\src\main\assets
set folder name should be assets
3. now the final step implement the given code inside the project folder:-
$cd project
/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
4. after following all these step react-native was successfully running on my pc
Solution 53 - Reactjs
Try the following.
- Remove Android and IOS folders
- run react-native eject
- run react-native run-android
Maybe after the previous steps you have executions npm start - --reset-cache
I work, I hope it helps you.