CODEWITHSUNDEEP
androidreact-native
Prasanth S
Prasanth S

Reputation: 3820

ReactNative Metro Bundler not starting automatically

react-native run-android not starting bundler so i tried react-native start it showing below error.

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8081
    at Server.setupListenHandle [as _listen2] (net.js:1286:14)
    at listenInCluster (net.js:1334:12)
    at Server.listen (net.js:1421:7)
    at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:157:18
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:156:12)
    at Generator.next (<anonymous>)
    at step (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:262)
    at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:422
Emitted 'error' event at:
    at Server.WebSocketServer._onServerError (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/ws/lib/WebSocketServer.js:82:50)
    at Server.emit (events.js:187:15)
    at emitErrorNT (net.js:1313:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)

react-native info

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM)2 Duo CPU     E7600  @ 3.06GHz
      Memory: 3.36 GB / 12.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.12.0 - /usr/local/bin/node
      Yarn: 1.10.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 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 21.1.2, 23.0.1, 25.0.0, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        API Levels: 21, 22, 23, 24, 25, 26, 27
    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.2 => 0.57.2 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

I tried cleaning cache and reverse adb still am getting that issue

react-native run-android showing below error.

enter image description here

Android Home configuration

export ANDROID_HOME=/<Path>/android-sdk-macosx
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

How to resolve this issue.

Upvotes: 41

Views: 181334

Answers (20)

Krishnaraj Rajendran Nair
Krishnaraj Rajendran Nair

Reputation: 893

It's because the port 8081 is in use.

Try

react-native start --port=8080

This will work out.

Upvotes: 18

Zafer &#214;ğ&#252;t
Zafer &#214;ğ&#252;t

Reputation: 13

try

npm i metro-config

npx react-native run-android

Upvotes: 0

Bernard Braun
Bernard Braun

Reputation: 1

Check that the port that is being used by React Native is not already being used. Use the command:

netstat -a -n -o | findstr < port >

Remember to change < port > to your React Native port. If already have a service running in this port, you'll use this command:

Taskkill /PID < taskPID > /F

Remember to change < taskPID > to task ID listed on previous command (it appears after LISTENING information, normaly is a 5 digit number)

After all, run npm start or react-native start again.

Upvotes: 0

Edor Linus
Edor Linus

Reputation: 1126

In my case I just stopped Metro and tried running my app again and it worked.

Upvotes: 1

Shiva
Shiva

Reputation: 12514

Note: Solution for iOS

Updating files in node_modules is not a solution. It might fix it in your machine but won't fix it for all. Every time you reinstall the modules, you need to patch it up again.

Problem

When I ran yarn android the metro bundler successfully runs in a separate terminal and app runs with no issue.

But for yarn ios, app builds and opens up in simulator but the metro-bundler could not start so app is not running.

enter image description here

Cause

What I found is, react-native uses packages/myapp/ios/myapp.xcodeproj/project.pbxproj:178 file to organize the sequence of action for a build.

            buildPhases = (
                9BD325B29C2F37E3FB2D5CCB /* [CP] Check Pods Manifest.lock */,
                FD10A7F022414F080027D42C /* Start Packager */,
                13B07F871A680F5B00A75B9A /* Sources */,
                13B07F8C1A680F5B00A75B9A /* Frameworks */,
                13B07F8E1A680F5B00A75B9A /* Resources */,
                00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
                422396959450562FD5166D49 /* [CP] Embed Pods Frameworks */,
                3C714C11B606C47481E15B97 /* [CP] Copy Pods Resources */,

You can see that(FD10A7F022414F080027D42C /* Start Packager */,) metro bundler is expected to run in the beginning so that app could connect to it ASAP.

In my case, the packager could not find the metro package as my node_modules folder has changed location. So I needed to let it know the new location.

How I solved? (Monorepo)

I dug deep and found the solution in packages/myapp/ios/myapp.xcodeproj/project.pbxproj:395

        FD10344022414F080027D42C /* Start Packager */ = {
            ...


            ...

            shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../../../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../../../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";

you might notice that I am using /../../../node_modules because I have a directory structure like

.
└── node_modules
└── packages
    ├── common
    ├── myapp
    └── their_app

Its normally like this ../node_modules

what I basically doing is maintaining two mobile apps in a single repo. See https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417 for more info.

Upvotes: 4

Ing Rico
Ing Rico

Reputation: 31

1.- Create directory:

android/app/src/main/assets

2.- edit file project:

node_module\metro-config\src\defaults\blacklist.js

or RN 0.64:

node_module\metro-config\src\defaults\exclusionList.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__\/.*/
];

or RN 0.64

var list = [/website\/node_modules\/.*/, /.*\/__tests__\/.*/];

with:

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

3.- in folder project run this:

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

This work for me!

Upvotes: 0

Prasanth S
Prasanth S

Reputation: 3820

I tried following steps it resolves my issue

  1. Running packager on different port react-native start --port 8084 --reset-cache
  2. Run react-native run-android --port 8084 in second Command Prompt window.
  3. After error screen appear clicking Android Ctrl + M, iOS Command + D.
  4. Click Dev Settings button at the bottom.
  5. Click Debug server host & port for device button.
  6. Type localhost:8084 and click OK button.
  7. Again run react-native run-android --port 8084

Upvotes: 48

Rashid Iqbal
Rashid Iqbal

Reputation: 1261

This is the Gradle issue.

update the distributionURL in app/gradle/wrapper/gradle-wrapper.properties

from

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

to

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

Upvotes: 0

david chungmin myung
david chungmin myung

Reputation: 11

I just solved by watching the youtube below.. https://youtu.be/LPYez4cs5LY

I summary like below

  1. make the directory

"android/app/src/main/assets/"

  1. replace sharedBlacklist variable in node_modules/metro-config/src/defaults/blacklist.js like below
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__\/.*/
];
  1. execute command like below on the terminal

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

Upvotes: 1

Mhmetengineer
Mhmetengineer

Reputation: 47

I suggest u delete this line import com.facebook.react.BuildConfig in Android / MainApplication

Upvotes: 0

Harsh Patel
Harsh Patel

Reputation: 6820

I have got the solution of the problem

  • go to your project and run 2 command shell
  • in first shell, run npm start
  • in the second shell, react-native run-android

then it will run

Upvotes: 0

Moises L. Apocalipse
Moises L. Apocalipse

Reputation: 11

I solved this by running "yarn start" on another terminal before starting "react-native run-android"

Upvotes: 1

user11243042
user11243042

Reputation:

It's worked for me 

react-native start --port=8080

Upvotes: 3

Ajoy Karmakar
Ajoy Karmakar

Reputation: 30874

Replace the code with this one. The path of the file is -

node_modules\metro-config\src\defaults\blacklist.js

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

I found this solution from Github.

Upvotes: 21

dipakbari4
dipakbari4

Reputation: 858

Same issue I've faced. The above solutions didn't worked for me. The problem was from NodeJS version.

The installed version of NodeJS was 12.11.1 in which I got the above problems. Then I replaced with the stable version 10.16.3 LTS and It works.

Hope this solution may helpful.

Upvotes: 4

Kamala Tennakoon
Kamala Tennakoon

Reputation: 169

Adding android:usesCleartextTraffic="true" to the application tag in AndroidManifest work for me

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

Upvotes: 2

Sk Sunny
Sk Sunny

Reputation: 71

From the error what I understand it must run bundle command first before starting JS Server

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

Finally you can check if no any dependency is missing by following command

./gradlew assembleRelease -x bundleReleaseJsAndAssets

then you can run android and react native server

react-native run-android
react-native start --reset-cache

Good Luck !

Upvotes: 0

Sully
Sully

Reputation: 417

Same exact problem I am facing too. I just updated to 0.59.1 and this isn't working... As a work around, I am running the metro builder in a separate tab, and then running react in a separate tab.

react-native start --reset-cache

in one terminal and left it open

react-native run-android

in another terminal

Upvotes: 15

srinivas
srinivas

Reputation: 5098

You can go to your Users folder and delete the ".expo" directory. It might be hidden as a system directory, so view all and then delete the .expo folder.

Run npm start again.

Upvotes: 0

Sandy.....
Sandy.....

Reputation: 2870

For Unable to load script from assets issue, you need to follow below steps:

1] Please check whether "assets" folder exists or not in 'android/app/src/main/'
    a] If it exists then, you need to delete two files(i.e. index.android.bundle and index.android.bundle.meta)
    b] If it doesn't exist, then create the assets directory in it.

2] Use below commands from your root project directory:
    cd android
    ./gradlew clean

3] Go to the root directory and check:
    a] If there is only one file(i.e. index.js), then run below 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

    b] If there are two files(i.e index.android.js and index.ios.js), then below 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

4] Finally run below command:
    react-native run-android

Upvotes: 0

Related Questions