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

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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 38
  • Comments: 36

Most upvoted comments

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

+33
alessandro-p on Apr 11, 2020

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.d9da4ed7 from ``:

+22
non-threatening on Apr 5, 2020

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! 😃

Screen Shot 2020-04-06 at 12 30 20 PM Screen Shot 2020-04-06 at 12 30 36 PM
+19
farhankassam2 on Apr 6, 2020

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:
  1. Clear browsing data
  2. watchman watch-del-all
  3. react-native start --reset-cache

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

+11
oharbo on Apr 14, 2020

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

+9
crutchcorn on Apr 8, 2020

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.<anonymous> (/node_modules/metro/src/Server.js:841:41) at Generator.next (<anonymous>) at asyncGeneratorStep (/node_modules/metro/src/Server.js:99:24) at _next (/node_modules/metro/src/Server.js:119:9)``
+7
exotexot on Apr 5, 2020

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’

+3
ovy9086 on Jul 22, 2020

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 ``:

+3
kwoxer on Jul 20, 2020

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"
	}
+3
liamkernighan on Jun 6, 2020

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!

+3
AlexDM0 on Apr 30, 2020

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

+1
ys-sherzad on Jun 8, 2020

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)

+1
crutchcorn on Jun 8, 2020

@artemkhalygov Thank you. It’s work 👍

+1
ndviet2307 on May 18, 2020
Read more comments on GitHub
← react-native: Debug JS Remotely crashes 0.52.0
react-native: [Debugger] Error for newbs trying to debug on-device →