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

[mmafrar]

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
Memory: 2.28 GB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 13.7.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.13.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
Languages:
Python: 2.7.10 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ^16.11.0 => 16.11.0
react-native: ^0.62.0 => 0.62.0
npmGlobalPackages:
react-native: Not Found

Description

Hi there! I'm a React Native newbie working on an interesting side project. Recently I updated project's @react-native-community/cli-debugger-ui version to 4.2.1 and had to come across below issue. Tried several workarounds, nothing worked. Reverting back @react-native-community/cli-debugger-ui version to 3.0.0 resolved the issue.

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 (DIR/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
  at ResolutionRequest.resolveDependency (DIR/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
  at DependencyGraph.resolveDependency (DIR/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
  at DIR/node_modules/metro/src/lib/transformHelpers.js:267:42
  at Server. (DIR/node_modules/metro/src/Server.js:841:41)
  at Generator.next ()
  at asyncGeneratorStep (DIR/node_modules/metro/src/Server.js:99:24)
  at _next (DIR/node_modules/metro/src/Server.js:119:9)

Reproducible Demo

• Setup a project with @react-native-community/cli-debugger-ui using version 3.0.0.
• Build and run the application and enable debugger.
• Update @react-native-community/cli-debugger-ui to version 4.2.1.
• Rerun the app and above error will be displayed on Metro Bundler console.
• Revert @react-native-community/cli-debugger-ui back to version 3.0.0.
• Rerun the application and issue will disappear.

[VitaliyGaliy]

Had the same problem, please help!

[Esemesek]

I followed the steps and couldn't reproduce this issue. Initializing the new react-native@0.62.0 project also works. Perhaps you could provide some reproduction repo?

[mmafrar]

@Esemesek you need to have the Debug mode turned on. While remote debugger runs on web browser above error message appears on Metro Bundler console.

I will attached the both versions of package-lock.json file. You can get a diff, the change caused the issue. Let me know if you need any further details from me.

package-lock-v1.txt

package-lock-v2.txt

[Esemesek]

Obviously, I was testing with the debugger on. I was able to reproduce your issues upon applying diff you provided. I was able to fix this issue by starting the debugger with --reset-cache flag. Tell me if this fixes your issue.

[mmafrar]

I'm using npx to run the app, not sure whether I can pass --reset-cache flag with that.

[Esemesek]

You should be able to use flag even if you use npx, but pretty sure you shouldn't use it. We use npx only to initialize the new projects.

[mmafrar]

I ran npm start -- --reset-cache and then started the app using react-native run-ios, but the issue still exists. Previously I used npx react-native run-ios to run the app.

Will it be possible for you to list the commands I need to execute? So that I can do a retry.

[VitaliyGaliy]

I completely reboot my OS mojave, and from the first start I have this issue!!! Please help!

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 (/Volumes/Samsung_T5/iMac/work/videoCalls/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
at ResolutionRequest.resolveDependency (/Volumes/Samsung_T5/iMac/work/videoCalls/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/Volumes/Samsung_T5/iMac/work/videoCalls/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
at /Volumes/Samsung_T5/iMac/work/videoCalls/node_modules/metro/src/lib/transformHelpers.js:267:42
at Server. (/Volumes/Samsung_T5/iMac/work/videoCalls/node_modules/metro/src/Server.js:841:41)
at Generator.next ()
at asyncGeneratorStep (/Volumes/Samsung_T5/iMac/work/videoCalls/node_modules/metro/src/Server.js:99:24)
at _next (/Volumes/Samsung_T5/iMac/work/videoCalls/node_modules/metro/src/Server.js:119:9)
Error: Unable to resolve module ./debugger-ui/ui.7beef9ab.css from ``:

[r0b0t3d]

@VitaliyGaliy Got this issue and manage to fix it by deleting yarn.lock then run yarn install. It may got some version conflict when upgrading packages.

[VitaliyGaliy]

I didn use yarn this time. Just npm install from the first start on the new OS.

[r0b0t3d]

So, you should try delete package-lock file then run npm install again

[VitaliyGaliy]

No difference, it happens even with a new created react native app
npx react-native init MyTestApp

MAP ./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)

[thymikee]

Do they exist though? Running watchman watch-del-all may help in such occasions, to clear watcher cache and re-crawl files

[VitaliyGaliy]

watchman watch-del-all - didnt solve my problem. In console I have

[mmafrar]

@Esemesek --reset-cache didn't resolve the issue for me. And this issue started after accidentally running npm audit fix.

According to a friend who has done React Native development couple of years, this might be caused to due to React Native core not being upgraded properly.

[boulgom]

I also have the issue. Even starting from scratch with npx react-native init test
It happens on physical and emulated devices. Flipper and react-devtools work fine.

I have the same message Unable to resolve module ./debugger-ui/debuggerWorker.d9da4ed7.js from ``:

But the file does exist in node_modules\@react-native-community\cli-debugger-ui\build\ui and http://localhost:8081/debugger-ui/debuggerWorker.d9da4ed7.js displays the file
With React Native version 0.61.5 i don't have issues

[mmafrar]

@boulgom I also experienced the same issue as you have explained above and decided to revert back from 0.62.0 to 0.61.5 since everything was working fine earlier.

[jessecureton]

I'm experiencing a similar issue after upgrading from react-native 0.61.5 to 0.62.2

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

It's reproducible in an existing project and a new project from template, but it only occurs on a physical device. In the simulator, debug mode works fine. Even with one packager instance running, the simulator will behave correctly and the physical device experiences the issue.

watchman watch-del-all && npm start -- --reset-cache and removing package-lock.json and yarn.lock have not made a difference.

[mmafrar]

@jessecureton if the app was already installed on the device before making the change, have you tried deleting it and installing it again with the latest changes?

[jessecureton]

Yes, this occurs for me in both an existing project updated to 0.62.2 and a clean-slate project initialized from react-native init. I actually went as far as removing every app signed by this developer profile from the device and reinstalling, and it still occurs.

I filed a more thorough report here, since the on-device error leads me to believe its react-native related more than it is debugger related.

[Puupuls]

I'm experiencing this issue on both 0.62.0 and 0.62.2

Error: Unable to resolve module ./debugger-ui/ui.7beef9ab.css from ``:

None of the above-mentioned methods have worked.
I have checked and file node_modules/@react-native-community/cli-debugger-ui/build/ui/ui.7beef9ab.css exists

Disabling debugging makes simulator load bundle, but only a white screen is displayed until Bundle location is changed to localhost:8081 and app is restarted Then app works until debugging is enabled again

[timhagn]

Solved it for me in two ways:

First I simply removed the sourceMappingURL from the mentioned files,
as these seemed to raise the error (build problems?).
But as I had to redo this on any package update / addition (which got quite annoying, as you might have guessed ; ), I was quite happy that @react-native-community/cli-debugger-ui v4.7.0 has been released yesterday!
So I quickly added the following to my package.json:

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

Now, after deleting yarn.lock, running react-native clean-project-auto (the same could have been accomplished by deleting node_modules, cleaning the individual builds & pods, but react-native-clean-project is so much neater % ) & running yarn again, the problem was gone.
(Be sure to remove the resolution, when RN updates again...)

Hope it helps anyone!

Best,

Tim.

[Puupuls]

I tried doing as @timhagn said, but for me, this hasn't fixed anything..... It still throws the same error The Only difference being that it does that after, not before it creates bundle and map.

[tamacroft]

hi, i have try using
"resolutions": { "@react-native-community/cli-debugger-ui": "4.7.0" }

but still disable ability touchable, ex: onPress is not working, but if not in debug mode, it working normaly

[timhagn]

Hi @tamacroft,

sad to read, that the resolutions field doesn't work for you,
have you tried removing the sourceMappingURLs?

And in my experience the onPress functionality depends on Device Timers.
So (for Android Emulator), a quick

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

should sync device times, again. For physical devices deactivating automatic time often helped.
But yeah, it's annoying (and there already are a few issues about over at the RN repo)...

[MarshallPatryk]

This problem I resolved by stoping debugging remote JS in expo app.

[brentvatne]

if you want to get a proper fix for this, if you're using react-native 0.63 (or expo sdk 39+) then delete your node_modules and lockfile (yarn.lock or package-lock.json) and run yarn/npm install again. this will pull in the latest version of @react-native-community/cli that includes a fix

[rahamin1]

if you want to get a proper fix for this, if you're using react-native 0.63 (or expo sdk 39+) then delete your node_modules and lockfile (yarn.lock or package-lock.json) and run yarn/npm install again. this will pull in the latest version of @react-native-community/cli that includes a fix

Tried that. Didn't help.

facebook/react-native#28844 (comment)

[brentvatne]

sorry i'm not sure what your issue might be. could you try to investigate the root cause and report back?

[rahamin1]

No idea either...

[IyiolaOwabumowa]

sigh, this is depressing

[briancbarrow]

In expo app, I resolve by install react-native-debugger-open

yarn add -D react-native-debugger-open

And add this script to package.json, use yarn debug to start expo dev server.

"debug": "REACT_DEBUGGER=\"rndebugger-open --open --expo\" expo start"

With --expo flag, react-native-debugger-open auto use expo's correct port.

Turn on Debug Remote JS in expo app, react-native-debugger will auto launch, and redux-devtools is work.

I use in expo 39 and react-native-debugger installed.
Both redux-devtools-extension and window.__REDUX_DEVTOOLS_EXTENSION__ are work.

Thank you @CacaoRick That fixed it for me

[sjonchhe]

its been bloddy 9 months and no solution yet?! wtf!

[lordival]

suddenly started having this issue too. stuck for hours now

[chuanxie]

@lordival try to run brew upgrade and install the latest watchman
now i dont have this issue anymore

[olivierlesnicki]

Faced the same issue when I tried to open "Debug" menu:

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

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)

react-native info

System:
  OS: macOS 10.15.7
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 1.00 GB / 32.00 GB
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 14.15.1 - /usr/local/bin/node
  Yarn: 1.17.3 - /usr/local/bin/yarn
  npm: 6.14.8 - /usr/local/bin/npm
  Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
  CocoaPods: 1.10.0 - /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
  Android SDK:
    API Levels: 28, 29
    Build Tools: 28.0.3, 29.0.2, 29.0.3
    System Images: android-22 | Google APIs ARM EABI v7a, android-22 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-R | Google Play Intel x86 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 3.6 AI-192.7142.36.36.6392135
  Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
  Java: 1.8.0_232 - /usr/bin/javac
  Python: 2.7.16 - /usr/bin/python
npmPackages:
  @react-native-community/cli: Not Found
  react: 16.13.1 => 16.13.1 
  react-native: 0.63.4 => 0.63.4 
  react-native-macos: Not Found
npmGlobalPackages:
  *react-native*: Not Found

[joakimgrr]

I tried a couple different methods mentioned here, but the thing that finally fixed it for me was:

Reset the repo (remove all untracked, and ignored files etc.) and yarn cache:
Please make sure you know what the git clean command does exactly before running it and possibly losing your work

$ git clean -dfx
$ yarn cache clean

Then cleaning xcode build datas:

$ rm -rf ~/Library/Developer/Xcode/DerivedData

Fresh install:

$ yarn
$ cd ios && pod install

And finally running the bundler:

$ yarn start --reset-cache

[JeremyBradshaw7]

For me I see this error repeatedly in the metro bundler output, which is a bit annoying, but it doesn't affect my ability to debug the app in any way, as it loads the bundle index afterwards anyway.

[vsheyanov]

On my end this error evolved after an upgrade to ReactNative 0.64.0, now i get this one in a terminal

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:592:3)
    at tryReadSync (fs.js:366:20)
    at Object.readFileSync (fs.js:403:19)
    at UnableToResolveError.buildCodeFrameMessage (/Users/victorsheyanov/code/expert-guidion-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17)
    at new UnableToResolveError (/Users/victorsheyanov/code/expert-guidion-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35)
    at ModuleResolver.resolveDependency (/Users/victorsheyanov/code/expert-guidion-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
    at DependencyGraph.resolveDependency (/Users/victorsheyanov/code/expert-guidion-app/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at /Users/victorsheyanov/code/expert-guidion-app/node_modules/metro/src/lib/transformHelpers.js:317:42
    at /Users/victorsheyanov/code/expert-guidion-app/node_modules/metro/src/Server.js:1471:14
    at Generator.next (<anonymous>)

Chrome console:

And it's true, debuggerWorker.aca173c4.js.map is not present in a build directory, only .js:

I checked with our team (Mac + Ubuntu OS), none of them has this .js.map file requested by Chrome when debugging and all of us has same error (either unable to resolve... or illegal operation on a directory...) that is cause by ChromeDebugger requesting 1 file: http://localhost:8081/debugger-ui/debuggerWorker.aca173c4.js.map

I did stick a console.log in a place where this error is thrown:

result:

Obviously /Users/victorsheyanov/code/expert-guidion-app/debugger-ui/debuggerWorker.aca173c4.js is incorrect path as it should be /Users/victorsheyanov/code/expert-guidion-app/node_modules/@react-native-community/cli-debugger-ui/build/ui/debuggerWorker.aca173c4.js

Any ideas what module can cause this problem?

PS. just to be clean, requesting .map file causes this error with debuggerWorker.aca173c4.js:

PPS: debugging works anyway, but this scary error as annoying as hell...

[micheleb]

I tried to fix the issues by patching metro to resolve the debugger-ui-related paths to the correct local paths, and was able to get rid of the errors described by @vsheyanov. However, in my case debugging still doesn't work (the app gets stuck after requesting those files). For now, I'm relying on Hermes debugging on Android, as none of the other solutions worked (it also happens on my colleagues' machines, as well as both on my Linux and MacOS machines, so it doesn't seem to be something local). Will try to get back to this with more info when I have time to investigate further.

[JackHull]

Still no progress in this? We are nearly in April... Really sad for a production framework.

[liamjones]

Still no progress in this?

I wouldn't expect progress on a ticket that's been closed. If it's still an issue I'd suggest raising a new ticket, ideally with reproduction steps or getting this ticket reopened.

[Jojr]

In my case, previously I did a change on AppDelegate.m, because of a problem with Flipper on physical devices, as described here 28419.

I just take off the 'TARGET_OS_SIMULATOR' condition, and now I can debug normally.

The problem cause:
#if DEBUG && TARGET_OS_SIMULATOR return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; #else return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; #endif

Now working:
#if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; #else return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; #endif

[jgudo]

Solved it by uninstalling the app on the emulator / device then build the app again.

[SourceCipher]

None of the above mentioned solutions fixes. It was working fine for me and suddenly as soon as I try to connect to debugger the app crashes. No errors in metro or anywhere else. Tried reinstalling packages, cache clean and other nonsense bazilion times with no luck.

Any maintainers want to actually look into this or we going to drag this issue for months?

[afilp]

I have the same problem, even for a brand new project (clean), through npx react-native init AwesomeProject. I run it and I get the same error: Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4.js

Could it be related to "Expo", as I was not using it before and 2 days ago I decided to create a sample app with Expo. I installed its CLI etc. Could it interfere somehow?

[afilp]

Also, I see that I can debug if I go here, but nothing is ever reported to console (with console.log()).

[Perni1984]

I think the main problem lies here -> #1304

[DerekPark]

--reset-cache and manually uninstalling app from emulator worked for me.

[Andre-at-LaCapitale]

Thanks, that fixed the issue on our side with Android physical device!

We used the npm out of the box way through overrides

  "dependencies": {
    . . .
  },
  "devDependencies": {
    . . .
  },
  "overrides": {
    "@react-native-community/cli-debugger-ui": "8.0.0"
  }

[arnaudambro]

--reset-cache and manually uninstalling app from emulator worked for me.

lol
it works !
so many hard things proposed... but the simplest one not.

thanks a lot @DerekPark

[Miyo-Excellent]

Do they exist though? Running watchman watch-del-all may help in such occasions, to clear watcher cache and re-crawl files

(MacOs 13.3.1 - M1) Work for me, thanks bro