Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 444
Prasanth S Avatar asked Oct 12 '18 10:10

Prasanth S


People also ask

How Metro bundler works in react-native?

Metro is a development platform for React Native. This project acts as a JavaScript bundler; it manages assets, caches builds and performs hot module reloading. Metro focuses on improving the developer experience for the React Native community.


2 Answers

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
like image 187
Prasanth S Avatar answered Sep 19 '22 13:09

Prasanth S


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.

like image 25
Ajoy Karmakar Avatar answered Sep 17 '22 13:09

Ajoy Karmakar