Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Debugger breaks the ability to interact with my app after upgrade #28531

Closed
crutchcorn opened this issue Apr 4, 2020 · 36 comments
Closed

Debugger breaks the ability to interact with my app after upgrade #28531

crutchcorn opened this issue Apr 4, 2020 · 36 comments
Labels
Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@crutchcorn
Copy link

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
Copy link

exotexot commented Apr 5, 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. (/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
Copy link

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

@VitaliyGaliy
Copy link

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

@farhankassam2
Copy link

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

@phuongpt
Copy link

phuongpt commented Apr 7, 2020

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

@crutchcorn
Copy link
Author

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

@cavator
Copy link

cavator commented Apr 9, 2020

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

@sudpmishra
Copy link

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

@sandeepg1220
Copy link

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

@syrakozz
Copy link

same here
react-native version 0.62.2

@artemkhalygov
Copy link

artemkhalygov commented Apr 10, 2020

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
Copy link

vitage commented Apr 10, 2020

same issue
0.62.1 & 0.62.2

@sudpmishra
Copy link

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
Copy link

same for me
react-native: v0.62.0

@alessandro-p
Copy link

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

@oharbo
Copy link

oharbo commented Apr 14, 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.

@Rishabh-Streak
Copy link

Rishabh-Streak commented Apr 17, 2020

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
Copy link

This helped me

react-native-community/cli#1081 (comment)

@shahnawazhussain125
Copy link

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
Copy link

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

@tayejoseph
Copy link

Am still having that same issue

@AlexDM0
Copy link

AlexDM0 commented Apr 30, 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!

@ndviet2307
Copy link

@artemkhalygov Thank you. It's work 👍

@liamkernighan
Copy link

liamkernighan commented May 29, 2020

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
Copy link

liamkernighan commented Jun 6, 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"
	}

@crutchcorn
Copy link
Author

crutchcorn commented 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)

@ys-sherzad
Copy link

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

@vsheyanov
Copy link

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
Copy link
Author

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
Copy link
Author

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
Copy link

emclab commented Jul 17, 2020

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
Copy link

kwoxer commented Jul 20, 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 ``:

@ovy9086
Copy link

ovy9086 commented Jul 22, 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'

@Asinox
Copy link

Asinox commented Sep 8, 2020

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

@stale
Copy link

stale bot commented Dec 25, 2020

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 25, 2020
@github-actions
Copy link

This issue was closed because it has been stalled for 7 days with no activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests