Could not connect to development server

[Derewith]

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

1. yarn start --reset-cache
2. yarn start
3. cd ios && pod cache clean --all && pod deintegrate && rm Podfile.lock && pod install
4. rebuild from Xcode and clean the build folder
5. 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.

[safaiyeh]

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

[Derewith]

Yeah it is on the same network

[jdegger]

Might be related to #29433 which is also unresolved

[riadhriadh]

checked info.plist

[Derewith]

@riadhriadh what do you mean?

[riadhriadh]

@Derewith cheked
this issues https://stackoverflow.com/questions/38501012/is-it-safe-to-add-localhost-to-app-transport-security-ats-nsexceptiondomains

[Derewith]

@riadhriadh this is my info.plist and the part `NSAppTransportSecurity` it's okay.

[riadhriadh]

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

[Derewith]

@riadhriadh i'm on iOS so i'cant test on android what's going on

[Derewith]

Any updates?

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[safaiyeh]

@Derewith can you provide a repro that consistently does this so I can take a look?

[timbielawski]

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!

[lorenzorheinicke]

• 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

Thank you @timbielawski, this worked for me. I also had to reset the iOS simulator in order to get it to work.

[my-name-is-nheo]

My devices are running on the same network as the metro bundler. Android connects well with it, but there is always an issue with iOS devices. I'm first building the app with XCode. XCode has its own output log, but I prefer to view the logs in one window.

[lukewlms]

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].

[marcosdourado]

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

[eyalyoli]

npm start -- --reset-cache helps!

[scgrossman]

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.

[amirhosseinmajdi]

run:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

Then:

Open Awesomeproject.xcodeproj in Xcode

Then drag and drop the main.jsbundle file from iOS folder of react native project to the Xcode->AwesomeProject->Awesomeproject->top of AppDeligate.h file(top of list)

Then:
Close all terminals.
Then restart terminal and react-native run-ios

Then:
cmd+D on simulator and touch->Configure Bundler and add ip of bundle server(ip of your mac) and port 8081 and reload app.

[Gregoirevda]

I confirm brew uninstall watchman after a macOS update to Monterey worked

[perinp150363]

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!

This is it thanks so much,
Phil

[franekantoni]

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].

Thank you! This is the only solution that worked for me.

[panda919]

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`