Cannot Connect to local debugger after update

Environment

System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 645.39 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.17.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/opt/node@10/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_232 - /usr/bin/javac
    Python: 2.7.16 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Upgrading version

Went from 0.61.5 => 0.62.0 Then as i’ve been debugging and trying to get everything working i’ve now updated to 0.62.2

Description

React Native has been quite smooth for me, everything has been working since the project started until now, the first React Native upgrade for me. Since then i’ve lost the ability to run on a device and this is crucial to me since the app i’m building is using BLE which is not available in the simulator.

When running on device i get this messsage:

Connection to http://localhost:8081/debugger-proxy?role=client timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in RCTWebSocketExecutor.m.

To debug this issue i’ve tested the following

• Validate the that the IP outputted during the build phase in xCode under Project => Report navigatior => build. According to this https://reactnative.dev/docs/running-on-device#connecting-to-the-development-server (where the issue i have is highlighted in the docs) the IP should be suffixed by xip.io, but it isn’t in my case, is this just outdated documentation? Or a bug? Or something that is invalid in my configuration?

• Tried multiple networks / changed DNS servers, (including trying it when running a personal hotspot from my iPhone)

To give some more details i’ve followed the this page https://react-native-community.github.io/upgrade-helper/ to update the project. After this i’ve also ran updates via the react native CLI.

For even more context i’ve noticed some strange behaviour from the after running react native start where if i press r in my terminal one time the bundler opens multiple chrome tabs with the debugger UI

[[ Here i press R one time]]
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...
info Launching Dev Tools...

Furthermore, when running in the simulator instead i get this now: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8081/debugger-ui/null' failed to load.

I’ve been at this for about 10 days now, very close to giving up. (really glad that i’m in a separate branch right now). Hopefully someone here can point me in the right direction as I’m quite new to native development

Reproducible demo

N/A

[dembe1]

Some context I have had the same issue after upgrading from 0.59.10 to 0.62.2. Funnily enough, doing some research on this brought me back to a comment I wrote a year ago about a similar problem with the same root cause.

Your issue comes down to the device trying to access the Metro packager at http://localhost:8081/debugger-proxy?role=client, but localhost (from the view of the device) would be the device itself, whereas the packager is still running on your MacBook. You need to make sure that the iPhone uses the (local) IP address of your MacBook instead of localhost. The post mentioned above suggests a fix for this very issue, but it seems that the internals have changed so that the fix doesn’t work anymore.

The fix I was able to fix the issue by using the Configure Bundler option of the developer menu (you can open the developer menu by shaking the device) and putting in my MacBook’s local IP address (port should remain 8081, if you haven’t somehow changed the port the packager is running on).

Optional: If your packager isn’t started at all In fact, in my case, I had an additional issue that needed to be fixed in order for things to work. The packager was not started at all when I tried to run on a device from Xcode. If you also encounter this (i.e. the packager window doesn’t pop up when running from Xcode), I can recommend this fix, it worked for me.

[jamieday]

@dembe1 Works for me - but it is just a workaround, is it not?

At least for me I have to Configure Bundler to link to Metro every time I rerun the app. The app doesn’t start up configured properly as it’s supposed to.

I suspect something wrong in the Bundle React Native code and images build phase.

EDIT: My problem was fully solved here https://github.com/react-native-community/upgrade-support/issues/25#issuecomment-655245024