React-native: Debugger breaks the ability to interact with my app after upgrade

[crutchcorn]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

Upon upgrading from 0.61.5 to 0.62.1, I noticed that whenever I try to run my debugger, I'm no longer able to interact with the app. When I open the debugger, I get the following error in the metro server:

Error: Unable to resolve module `./debugger-ui/ui.cc464243.js` from ``:

None of these files exist:
  * debugger-ui\ui.cc464243.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui\ui.cc464243.js\index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\lib\transformHelpers.js:267:42
    at Server.<anonymous> (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:99:24)
    at _next (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:119:9)
Error: Unable to resolve module `./debugger-ui/ui.7beef9ab.css` from ``:

None of these files exist:
  * debugger-ui\ui.7beef9ab.css(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui\ui.7beef9ab.css\index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\lib\transformHelpers.js:267:42
    at Server.<anonymous> (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:99:24)
    at _next (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:119:9)
Error: Unable to resolve module `./debugger-ui/debuggerWorker.d9da4ed7.js` from ``:

None of these files exist:
  * debugger-ui\debuggerWorker.d9da4ed7.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui\debuggerWorker.d9da4ed7.js\index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\lib\transformHelpers.js:267:42
    at Server.<anonymous> (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:99:24)
    at _next (C:\Users\crutchcorn\git\GitGui\GitShark\node_modules\metro\src\Server.js:119:9)

React Native version:

Run react-native info in your terminal and copy the results here.

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
    Memory: 4.54 GB / 15.95 GB
  Binaries:
    Node: 12.16.1 - C:\Users\CRUTCH~1\AppData\Local\Temp\yarn--1586030292453-0.828895746177013\node.CMD
    Yarn: 1.22.0 - C:\Users\CRUTCH~1\AppData\Local\Temp\yarn--1586030292453-0.828895746177013\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Python: 3.8.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.1 => 16.13.1
    react-native: ^0.62.1 => 0.62.1
  npmGlobalPackages:
    *react-native*: Not Found
Done in 3.10s.

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Clone this: https://github.com/crutchcorn/GitShark/tree/97ee89fc25c51a5ed03e59b25ee7967c1aea0211
2. Run yarn android
3. Enable debugger, open console dialog
4. Try to interact with the app

Expected Results

Describe what you expected to happen.

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

https://github.com/crutchcorn/GitShark/tree/97ee89fc25c51a5ed03e59b25ee7967c1aea0211

[exotexot]

I'm getting similar issues

``[Sun Apr 05 2020 18:18:13.475] BUNDLE ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)Error: Unable to resolve module ./debugger-ui/debuggerWorker.d9da4ed7.js from :

None of these files exist:

• debugger-ui/debuggerWorker.d9da4ed7.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
• debugger-ui/debuggerWorker.d9da4ed7.js/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  at ModuleResolver.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
  at ResolutionRequest.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
  at DependencyGraph.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
  at /node_modules/metro/src/lib/transformHelpers.js:267:42
  at Server. (/node_modules/metro/src/Server.js:841:41)
  at Generator.next ()
  at asyncGeneratorStep (/node_modules/metro/src/Server.js:99:24)
  at _next (/node_modules/metro/src/Server.js:119:9)``

[non-threatening]

I'm having the same issue with 0.62.0 building for android.
When I open the developer menu and tap 'Debug' I am no longer able to interact with touchables. When I turn debugging off, it works as expected.

Error: Unable to resolve module./debugger-ui/debuggerWorker.d9da4ed7from ``:

[VitaliyGaliy]

Have the same issue "react-native": "0.62.0"

[farhankassam2]

I suggest two potential solutions to this:

1) try running npm start -- --reset-cache so that the bundler's cache is reset. You can even configure this in the bundler settings within your IDE like in Webstorm (see attached screenshot)
2) or click reload from the chrome debugger window, which reloads the app in debugger mode on the simulator for you (see second attached screenshot).

I tried doing both of these and the debugger problem no longer appeared on my console. Cheers! :)

[phuongpt]

That's problems with plugins inside app, in my case is upgrading RNRF

[crutchcorn]

@farhankassam2 that solution doesn't work for me either.

[cavator]

I'm having the same issue, and if you try to init a new project it occurs too :/

[sudpmishra]

Getting the same issue.
react-native : v0.62.1

[sandeepg1220]

Mee too getting the same issue.
react-native : v0.62.1

[syrakozz]

same here
react-native version 0.62.2

[artemkhalygov]

same for me
react-native: v0.62.2

P.S. I restarted my laptop and removed application from my phone. After that I ran yarn android and now debugger works as expected.

[vitage]

same issue
0.62.1 & 0.62.2

[sudpmishra]

same for me
react-native: v0.62.2

P.S. I restarted my laptop and removed application from my phone. After that I ran yarn android and now debugger works as expected.

Nope, I still get the issue.

[anabelaatavares]

same for me
react-native: v0.62.0

[alessandro-p]

I found this answer on stack overflow useful. Hard reload solved my issue.

[garbo-a]

Finally found a working approach since had this issue after upgrade to RN v0.62.0:
Upgraded to react-native v0.62.2 and installed pods

• build project using Xcode
• observe that Fast Refresh is not working
• killed RN packager
  Then performed 3 following steps:
• Clear browsing data
• watchman watch-del-all
• react-native start --reset-cache

after the new RN packager was started observed that Fast Refresh is working as expected.

[Rishabh-Streak]

Even i had same issue on RN0.62.2 none of the above suggestions helped.. i downgraded to RN0.61.5 and hopefully it is working fine will wait for this issue to get fixed to upgrade.

[kmkrtich]

This helped me

https://github.com/react-native-community/cli/issues/1081#issuecomment-614223917

[shahnawazhussain125]

I have same issue but I resolved it by changing the browser from google chrome to Firefox. When I open debugger in firefox the error is removed and It is working.

[artemkhalygov]

Try to do this:
Go to your time settings and trigger Automatic date and time.

[tayejoseph]

Am still having that same issue

[AlexDM0]

For me, what fixed it was removing

"plugins": [
    "@babel/plugin-proposal-class-properties"
  ]

from my babel.config.js. None of the other methods worked.

No idea why this fixes it but hey, it works!

[ndviet2307]

@artemkhalygov Thank you. It's work :+1:

[liamkernighan]

Removing the application from my phone, saving changes to git, git clean -xdf && yarn && yarn android helped me.

Not sure if it happens again, but I have a desktop and a laptop and that problem never occured on my laptop. Both run Windows 10 64-bit, Node and Chrome versions are the same, I haven't found any differences yet.

Since switching the workstation is not a solution I'll keep searching.

[liamkernighan]

Maybe the problem was in react-native-cli version. Never occurred since I downgraded from 4.9.0 to 4.7.0 and reinstalled the application on my phone.

    "resolutions": {
        "@react-native-community/cli": "4.7.0"
    }

[crutchcorn]

I spent hours on this, but I finally figured it out!

As it turns out, my time between my phone and desktop were unsynced by a few seconds. onPress is _very_ time-sensitive. I found this command:

adb shell "date `date +%m%d%H%M%Y.%S`"

from this comment

However, a few things:

1) I'm on Windows 10, so that command just plain doesn't work for me
2) The phone I'm using has Android 10 on it, and the date command doesn't have the same format (nor does it work as-expected)

The solution for me wasn't to sync the time manually, but to set the NTP servers (which server tells your device what time it is) to match my Windows machine:

adb shell settings put global ntp_server time.windows.com

(Side note, if you're not certain that this is your time server, you can confirm by running this in PowerShell w32tm /query /peers)

[ys-sherzad]

for me, I restarted my mac, it solved the issue

[vsheyanov]

Hi @crutchcorn, I checked you solution and for combination (Mac, Android Galaxy S8, react-native 0.62.2) it didn't help, unfortunately. Though I didn't try actually, because my devices seem to be in sync, but having same issues (ui-debugger missing ... + on device when debugging onPress events don't fire):

adb shell "date" && date
Thu Jun 11 10:39:24 CEST 2020
Thu Jun 11 10:39:24 CEST 2020

[crutchcorn]

Yeah, @vsheyanov there definately seems to still need to be work done on this issue. While I can debug and press items on screen, the Cannot find still occurs, and I've had to sync times a few instances

[crutchcorn]

The trick I linked no longer works for me. It did for a time but is hit-or-miss whether or not it functions as-expected

[emclab]

me too with RN 0.62.2. It just happened a few hours ago and the app in Android emulator stuck by the error.

[kwoxer]

I have the same issue with RN 0.63.0.

Tried to hard reset cache of chrome without any change. Also tried the adb shell settings put global ntp_server time.windows.com with no change.

It also does not matter if I run on emulator or on my device.

Still getting Error: Unable to resolve module ./debugger-ui/ui.... from ``:

[ovy9086]

Indeed this seems to fix it : https://stackoverflow.com/questions/59658998/expo-unable-to-resolve-module-debugger/60755519#60755519

just 'CMD+CTRL' and click reload button in chrome and then 'Reset cache & hard reload'

[Asinox]

Run npm i react-devtools-core in order to update debugger.