ReactNative Metro Bundler not starting automatical

问题:

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.

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.

回答1:

Its because the port 8081 is in use..

Try

react-native start --port=8080

This will work out.

回答2:

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 Ctrl + M.
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

回答3:

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.

回答4:

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

回答5:

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.

回答6:

It's worked for me

react-native start --port=8080

回答7:

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

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

回答8:

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

回答9:

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.

回答10:

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 !