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

Error: Unable to resolve module ./debugger-ui/debuggerWorker.cff11639.js from ``: #28844

Closed
ScottPierce opened this issue May 6, 2020 · 166 comments
Labels
DX Issues concerning how the developer experience can be improved. Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Resolution: Locked This issue was locked by the bot. Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used.

Comments

@ScottPierce
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

React Native version:

npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 43.02 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.1.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /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: 26, 27, 28, 29
      Build Tools: 26.0.2, 27.0.3, 28.0.3, 29.0.1, 29.0.2
      System Images: android-23 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_211 - /usr/bin/javac
    Python: 2.7.17 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. run npx react-native init Blah --template react-native-template-typescript
  2. run npx react-native start
  3. run npx react-native run-android
  4. Tell app to use debug mode
  5. See exception:
Error: Unable to resolve module `./debugger-ui/debuggerWorker.cff11639.js` from ``: 

None of these files exist:
  * debugger-ui/debuggerWorker.cff11639.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui/debuggerWorker.cff11639.js/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/Users/scott.pierce/workspace/test/example/example-react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/scott.pierce/workspace/test/example/example-react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Users/scott.pierce/workspace/test/example/example-react-native/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at /Users/scott.pierce/workspace/test/example/example-react-native/node_modules/metro/src/lib/transformHelpers.js:267:42
    at Server.<anonymous> (/Users/scott.pierce/workspace/test/example/example-react-native/node_modules/metro/src/Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/scott.pierce/workspace/test/example/example-react-native/node_modules/metro/src/Server.js:99:24)
    at _next (/Users/scott.pierce/workspace/test/example/example-react-native/node_modules/metro/src/Server.js:119:9)

Expected Results

I wouldn't get this error.

@react-native-bot react-native-bot added the Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used. label May 6, 2020
@Maddumage
Copy link

I'm also having the same issue when run on debug mode.

@VG7
Copy link

VG7 commented May 30, 2020

Same issue "react-native": "0.62.2",

@imamrobani
Copy link

Same issue "react-native": "0.62.2",

same

@Nandha91
Copy link

Nandha91 commented Jun 4, 2020

Same issue.

My React versions :

"react": "16.11.0",
"react-native": "0.62.2"

Any solutions?

@jmlavoier
Copy link

jmlavoier commented Jun 4, 2020

I believe it's something with react-native-config. I have the same issue here:

    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-config": "^1.2.0",

@HansBouwmeester
Copy link

HansBouwmeester commented Jun 5, 2020

@jmlavoier I have the same issue, but don't use react-native-config.

"react": "16.11.0",
"react-native": "0.62.2",

@imamrobani
Copy link

@rosentoshev
Copy link

I have the same issue:

    "react": "16.11.0",
    "react-native": "0.62.2",

@HansBouwmeester
Copy link

@imamrobani Thanks for the link. But it doesn’t address the issue?

The issue may well be Chrome related. But it wasn’t there in earlier versions of React-Native.

@HenriqueDerosa
Copy link

Same here, weird that it stopped working tonight.
It's not allowing, in Android device at least, to press the TouchableOpacity component using onPress. It seems to work for the first time, some interaction of my app work once, but then stops to work.

❯ react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 17.99 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.7.0 - ~/.nvm/versions/node/v13.7.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.7.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 27, 28
      Build Tools: 27.0.3, 28.0.3
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_231 - /usr/bin/javac
    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.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

@HenriqueDerosa
Copy link

HenriqueDerosa commented Jun 6, 2020

I uninstalled completely the app from my device, and it turned it back to work without the error 🤔 (Android device)

@imamrobani
Copy link

@imamrobani Thanks for the link. But it doesn’t address the issue?

The issue may well be Chrome related. But it wasn’t there in earlier versions of React-Native.

in my case I use

"react": "16.11.0",
"react-native": "0.62.2",
"react-navigation": "^4.0.10"

the problem is when I use the actual device in mode debugging my apps can't navigation to another screen. but if use emulator is running well.
Does anyone know where the problem is?

previously I used react native 0.61 just fine

@HenriqueDerosa
Copy link

HenriqueDerosa commented Jun 6, 2020

It is happening everytime I switch from debugging from bash to chrome, while it's showing the logs in metro bundler, and I click debug in the rn menu

edit:
it's basically forcing us to use the metro bundler, and not chrome to debug.
When I set the app from the menu to debug mode, when javascript logs are going to the browser console, I receive this error

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

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

@imamrobani
Copy link

It is happening everytime I switch from debugging from bash to chrome, while it's showing the logs in metro bundler, and I click debug in the rn menu

edit:
it's basically forcing us to use the metro bundler, and not chrome to debug.
When I set the app from the menu to debug mode, when javascript logs are going to the browser console, I receive this error

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

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

Yes, it's exactly like this, I have uninstalled and install again but still same when debugging mode

@vsheyanov
Copy link

Same here, weird that it stopped working tonight.
It's not allowing, in Android device at least, to press the TouchableOpacity component using onPress. It seems to work for the first time, some interaction of my app work once, but then stops to work. ```

Hi @HenriqueDerosa, can you please check this issue - is it similar to that's happening to you on an Android device when debugging?
#29083 (comment)

@ncharris93
Copy link

ncharris93 commented Jun 17, 2020

Hey All, I had this issue and what worked for me was just clearing my Google Chrome cache.

And by 'worked' I mean that I didn't get the red error screen over my simulator & I could continue developing as normal.

@mayurnemade7
Copy link

Any Solution for this? I am not able to debug application. Breakpoint is not hitting

@nateblog
Copy link

Any solution to this? It seems it happens on React Native 0.62.2 even if you create a fresh project. For some reason there is an error 500 when you look at the debugger.

Screen Shot 2020-06-19 at 12 08 04 PM

@imamrobani
Copy link

Any solution to this? It seems it happens on React Native 0.62.2 even if you create a fresh project. For some reason there is an error 500 when you look at the debugger.

Screen Shot 2020-06-19 at 12 08 04 PM

just skip it, it doesn't matter as long as it doesn't cause application error

@R4DIC4L
Copy link

R4DIC4L commented Jun 22, 2020

When this is happening, I can no longer input text into text fields, as the keyboard doesn't appear. The debugger becomes unusable, not being able to login into the application.

@imamrobani
Copy link

When this is happening, I can no longer input text into text fields, as the keyboard doesn't appear. The debugger becomes unusable, not being able to login into the application.

try it on emulator

@R4DIC4L
Copy link

R4DIC4L commented Jun 22, 2020

When this is happening, I can no longer input text into text fields, as the keyboard doesn't appear. The debugger becomes unusable, not being able to login into the application.

try it on emulator

On emulator it is working, but the error is still thrown in the bundler. Why is it affecting only device debugging?

@imamrobani
Copy link

When this is happening, I can no longer input text into text fields, as the keyboard doesn't appear. The debugger becomes unusable, not being able to login into the application.

try it on emulator

On emulator it is working, but the error is still thrown in the bundler. Why is it affecting only device debugging?

when I use the actual device (Android 9) it's not working, then I change the device to under android 9, in my case I use Android 6 it's working

@R4DIC4L
Copy link

R4DIC4L commented Jun 22, 2020

When this is happening, I can no longer input text into text fields, as the keyboard doesn't appear. The debugger becomes unusable, not being able to login into the application.

try it on emulator

On emulator it is working, but the error is still thrown in the bundler. Why is it affecting only device debugging?

when I use the actual device (Android 9) it's not working, then I change the device to under android 9, in my case I use Android 6 it's working

You mean you change the emulated device to android 6 API or use an older device for debugging? Nevertheless, this shouldn't happen and the debugger should work on newer devices as well ...

@cs1717c
Copy link

cs1717c commented Jun 23, 2020

Resolved for me by hard refreshing (shift + refresh) the React debugger tab in Chrome, then clearing application data in inspector, then finally restarting the main bundler thread in bash (npm start)

@lame-dev
Copy link

lame-dev commented Jun 24, 2020

Same problem here. As soon as the Debug mode is activated, it seems the app stops registering all onPress() events. scrolling is still possible.

The problem doesn't occur within the emulator. However, the same error is still shown in the console and terminal (react server).

react-native -v returns

react-native-cli: 2.0.1
react-native: 0.62.2

@Selman555
Copy link

Selman555 commented Jun 27, 2020

I've been having this issue as well. Searching high and low for an answer.
Disabling my ad-blocker gave me more feedback in the console for some reason.
And then I noticed chrome was debugging the main thread. Easy to overlook.

Aantekening 2020-06-27 202124

After clicking the debuggerWorker thread, the app started registering and hitting breakpoints...
I hope this helps some of you out 👍

@Javi
Copy link

Javi commented Dec 29, 2020

I can confirm it keeps happening. RN 0.63.4, CLI version 4.13.1.
Alongside the usual errors, Chromium's console shows the following

DevTools failed to load SourceMap: Could not load content for http://localhost:8081/debugger-ui/ui.e31bb0bc.js.map: HTTP error: status code 500, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost:8081/debugger-ui/ui.e31bb0bc.css.map: HTTP error: status code 500, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost:8081/debugger-ui/debuggerWorker.aca173c4.js.map: Fetch through target failed: Target not supported; Fallback: HTTP error: status code 500, net::ERR_HTTP_RESPONSE_CODE_FAILURE

@SeanDunford
Copy link

I believe

Source map error: Error: request failed with status 500
Resource URL: http://localhost:8081/debugger-ui/debuggerWorker.aca173c4.js
Source Map URL: /debugger-ui/debuggerWorker.aca173c4.js.map

Is a red-herring. If you have an error that's throwing silently or uncaught. The debugger can get confused and show the above error as the issue.

In my case. I had an error thrown like so

if (!res.ok) { throw (json.detail); }

json.detail was null

So an empty error was being thrown. Yet the debugger was showing

Source map error: Error: request failed with status 500
Resource URL: http://localhost:8081/debugger-ui/debuggerWorker.aca173c4.js
Source Map URL: /debugger-ui/debuggerWorker.aca173c4.js.map

from a different scope.

Stepping through the code i found the true cause.

If you are experiencing this issue and you are on latest react-native-cli as indicated by @grabbou
#28844 (comment)

Fixed.

Please upgrade CLI to 4.13.1 as per this official React Native CLI guide.

Note this only works on React Native 0.62 and newer. No plans for backwards fixes for older versions.

I suggest that you slowly step through your code, including node-modules to find the actual error. Pause on caught exceptions can also be helpful but noisy.

@calintamas
Copy link

In my case, the issue was Flipper.
I commented out Flipper init from didFinishLaunchingWithOptions in AppDelegate.m and it works

#if DEBUG
    InitializeFlipper(application);
#endif

@gjpsiqueira
Copy link

Hi guys! For me, worked clearing my Google Chrome cache and clearing cache Simulator IOS: Device -> Erase all Content and Settings

I hope I've helped anyone.

@lordival
Copy link

lordival commented Jan 7, 2021

same issue. stuck for a few hours now

@shubhanus
Copy link

I got this issue because I was using Icon.getImageSourceSync from react-native-vector-icons.

this works for me but is there any fix you found? @MrOggy85

@MrOggy85
Copy link

MrOggy85 commented Jan 7, 2021

@shubhanus no, not really. I just made sure to not use the method when remote debugging.
When I do remote debugging I just require a png directly.

@murdink
Copy link

murdink commented Jan 8, 2021

For anyone that is still stuck on this, checking "Disable cache (while DevTools is open)" in the console settings usually fixes it.

image

@JasonXiang2014
Copy link

For anyone that is still stuck on this, checking "Disable cache (while DevTools is open)" in the console settings usually fixes it.

image

It works for me

@shubhanus
Copy link

I was using absolute path with module-resolver that was causing this issue removing that all error got clear from the console and debugging works without clearing cache and no need of doing any cleanup.

@CallmeKingsley
Copy link

for IOS, I went ahead and select a new device. apparently, that resolved my issue

@Einere
Copy link

Einere commented Jan 19, 2021

i fixed it by turn on debug mode mentioned by HenriqueDerosa.
i don't know why it turned off sometime.. 🤔

@cmpdvd
Copy link

cmpdvd commented Jan 22, 2021

i fixed it by deactivate/reactivate wifi on device and on mac
same wifi on both

@dave-vazquez
Copy link

dave-vazquez commented Jan 29, 2021

I've been having this issue as well. Searching high and low for an answer.
Disabling my ad-blocker gave me more feedback in the console for some reason.
And then I noticed chrome was debugging the main thread. Easy to overlook.

Aantekening 2020-06-27 202124

After clicking the debuggerWorker thread, the app started registering and hitting breakpoints...
I hope this helps some of you out 👍

This was the only solution out of every single thread I've read related to this issue that's worked for me.

Days...DAYS......

Thank you @Selman555 🙂

@luckysunle
Copy link

I got the same issue because i opened a v2ray proxy;
Now i closed proxy, it works;

@rohitgurudasani
Copy link

in my case i'm using react-native-ble-manager package, by turn-off my Bluetooth, now its working fine.

@rodrigoalvez
Copy link

Still having the same issue.

@zoultrex
Copy link

zoultrex commented Jul 8, 2021

It was also a chrome cache problem in my case, I just copy paste the debugger address into incognito window to solve this quick and easy

@jckw
Copy link

jckw commented Aug 6, 2021

I believe

Source map error: Error: request failed with status 500
Resource URL: http://localhost:8081/debugger-ui/debuggerWorker.aca173c4.js
Source Map URL: /debugger-ui/debuggerWorker.aca173c4.js.map

Is a red-herring.

I'm pretty sure this is right. Looking at the debugging console, I noticed that there was an error being thrown by one of the packages (RN Reanimated). Fixing that error means that the debugger now works.

@Hemistone
Copy link

Is there any body using private package or custom in-house packages? For me, whenever I tried to use our company's published package(ex UIkit library), it gives me this error. If I try without using some ui elements from our package, no errors shown.

I've tried all solutions from above(clear caches, upgrade to metro 0.65, delete and rebuild etc.), but non of solutions helped me.

If there is something I should check on publishing npm libraries for react native to not to be shown this error, please tell me what am I doing wrong.

@wcldyx
Copy link

wcldyx commented Sep 23, 2021

Is there nothing we can do

@maoguijun
Copy link

大家好,我遇到了这个问题,对我有用的只是清除我的 Google Chrome 缓存。

“有效”是指我的模拟器没有出现红色错误屏幕,我可以继续正常开发。

你真是个天才,真的有用

Kudo added a commit to expo/expo-cli that referenced this issue Oct 19, 2021
# Why

facebook/react-native#28844

# How

prepending a middleware in metro and return 404 for `/debugger-ui/*.map` requests

# Test Plan

initialize a sdk43 project. launch app, enable remote debugging and open inspector. seeing if there are EISDIR errors.
@bradydowling
Copy link

Not sure if this should be closed now. I'm getting this error with the following system info:

System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 72.52 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.11 - ~/Dev/tiamat/mobile/node_modules/.bin/yarn
    npm: 7.21.0 - ~/.nvm/versions/node/v14.17.3/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 29.0.3, 30.0.2, 31.0.0
      System Images: android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7621141
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.65.1 => 0.65.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

@facebook facebook locked as resolved and limited conversation to collaborators Nov 19, 2021
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Nov 19, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
DX Issues concerning how the developer experience can be improved. Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Resolution: Locked This issue was locked by the bot. Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used.
Projects
None yet
Development

No branches or pull requests