react-native: Could not connect to development server

Hello there, i can’t understand why the MetroBundler it’s not working.

Description

As soon as i start the app, it throws me this error that won’t let me connect to my metro bundler. I checked everything, from the port 8081 status and i don’t understand why. Via the simulator it’s working, but with my real device it’s not. I have an iPhone XR with iOS 13.6

React Native version:

System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Memory: 442.25 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.20.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.1
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

I tried this steps

yarn start --reset-cache
yarn start
cd ios && pod cache clean --all && pod deintegrate && rm Podfile.lock && pod install
rebuild from Xcode and clean the build folder
rm -rf node_modules and yarn to install the packages again

Expected Results

The app should connect to the MetroBundler.

Screenshot:

The ip you see in the image is the right one.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 24 (3 by maintainers)

Links to this issue

Most upvoted comments

There seems to be a problem with watchman, removing it I was able to connect.

I did brew uninstall watchman and it resolved the issue, thanks @marcosdourado . I’m not quite sure why or how it resolved it. A mystery for another day.

+15

scgrossman on Jul 26, 2021

I was having similar issues, thought it must be cached versions so cleared everything

rm -rf node_modules
rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-*
watchman watch-del-all
npm install
npm start – --reset-cache

It works!

+14

timbielawski on Sep 22, 2020

There seems to be a problem with watchman, removing it I was able to connect.

marcosdourado on Mar 27, 2021

Hi @Derewith is your physical device on the same network as where the metro server is running?

safaiyeh on Aug 8, 2020

npm start -- --reset-cache helps!

eyalyoli on May 13, 2021

This worked: Dev Menu in app -> Configure Bundler, and set to my Mac’s specific address.

IP: 192.168.0.x Port: 8081 Entrypoint: src/index (we have a custom path - just ‘index’ is more common)

Type into terminal ifconfig and under en0 you will find your ipaddress next to inet (and before netmask).

Source: [this comment].

lukewlms on Mar 16, 2021

Or I used this solution, and it worked for me.

`- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { #if DEBUG return [NSURL URLWithString:@“http://==local network ip address==/index.bundle?platform=ios”]; // return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@“index” fallbackResource:nil]; #else return [[NSBundle mainBundle] URLForResource:@“main” withExtension:@“jsbundle”]; #endif }

@end`

panda919 on Feb 10, 2022

https://stackoverflow.com/questions/42064283/could-not-connect-to-react-native-development-server-on-android

riadhriadh on Aug 11, 2020