Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4.js

[omar-bear]

Report a bug App crash when i turn debug on mode

versions

    "react-native": "0.66.0",
    "metro-react-native-babel-preset": "0.66.2",

What is the current behavior? The app work fine but it crash when i turn it to debug mode

How can i reproduce the error? After a yarn dev and yarn android when i turn it to debug mode it crash and i can see only the error below

You can test it by your self from here install start-ui native

npx create-start-ui --native myApp

That will scaffold a new folder with the latest version of 🚀 Start UI [native] 🎉

Then just go to the created folder cd myApp and follow the Installation Guide.

What is the error I'm getting? After a yarn dev and yarn android when i turn it to debug mode it crash and i can see only this error

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4.js from /home/omar/Documents/Projects/JawDay-mobile/.: 

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui/debuggerWorker.aca173c4.js/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:107:15)
    at DependencyGraph.resolveDependency (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/node-haste/DependencyGraph.js:288:43)
    at /home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/lib/transformHelpers.js:129:24
    at Server._resolveRelativePath (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/Server.js:1072:12)
    at async Server.requestProcessor [as _processSourceMapRequest] (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/Server.js:428:37)
    at async Server._processRequest (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/Server.js:389:7)
Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4.js from /home/omar/Documents/Projects/JawDay-mobile/.: 

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui/debuggerWorker.aca173c4.js/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:107:15)
    at DependencyGraph.resolveDependency (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/node-haste/DependencyGraph.js:288:43)
    at /home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/lib/transformHelpers.js:129:24
    at Server._resolveRelativePath (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/Server.js:1072:12)
    at async Server.requestProcessor [as _processSourceMapRequest] (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/Server.js:428:37)
    at async Server._processRequest (/home/omar/Documents/Projects/JawDay-mobile/node_modules/metro/src/Server.js:389:7)

this error guide me to metro modules so this is i put the issue here

what is metro config in the project in file metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false, // false because of hermes issue https://github.com/storybookjs/react-native/issues/152
      },
    }),
  },
};

Can someone find solution for this probleme i tested all solutions here but it doesnt work

[motiz88]

@omar-bear Can you check which version of @react-native-community/cli-debugger-ui you have installed? It seems like https://github.com/react-native-community/cli/pull/1307 should have fixed this.

Also, have you tried clearing your Chrome cache?

[exzos28]

+1

[sayurimizuguchi]

Deleting the Cache from Google Chrome fixed this issue for me.

Settings -> More Tools -> Clear browsing data

Make sure to select "All time"

[exzos28]

Deleting the Cache from Google Chrome fixed this issue for me.

Settings -> More Tools -> Clear browsing data

Make sure to select "All time"

I open debugger in incognito and it doesn't work for me.

[ahmedu007]

Failing for us too. Clearing the cache or anything else doesn't do anything. Any sort of help would be highly appreciated 🙏

[PhilippLeh21]

I am building an app with react-native (without expo) and it works both on simulator and on actual iPhone. But when I go in debug mode (Shake and Debug with Chrome) on simulator, the screens turns black. In my opinion the app is still running, because I get the same error messages as before but I can't do anything. All of the dependencies are up to date and reset of entire project doesn't help either. Does anyone experience the same issues and is there any fix?

[claudineibr]

Same problem here, I've tried everything and it didn't work I formatted my machine and nothing, the worst thing is that I'm in the final stage of the project and late.

[motiz88]

Can someone who's experiencing this issue provide a minimal repro case for me to look at? Ideally as a GitHub repo plus step-by-step instructions (that include clearing Chrome's cache and restarting the debug session).

[omar-bear]

Can someone who's experiencing this issue provide a minimal repro case for me to look at? Ideally as a GitHub repo plus step-by-step instructions (that include clearing Chrome's cache and restarting the debug session).

You can install the project in the issue description and debug it directly, thanks ☺️

[PhilippLeh21]

Since version 2.x of react-native-reanimated does not yet support remote debugging (https://docs.swmansion.com/react-native-reanimated/docs/#known-problems-and-limitations), I downgraded to Version 1.13.1. and the debugger finally worked again. Unfortunately I do not know yet, if the lower version of react-native-reanimated has any impact on other libraries which rely on it (react-navigation for example). I hope this helps a little. :)

[poojaSivakumar97]

am facing same issue with "react-native":"0.65.2"

app works fine ,but crashes in debug mode

[joshrizzo]

Same issue here. At the very least, it needs to throw a better error than this. Our packages are:

    "@react-native-community/blur": "^3.6.0",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "fastestsmallesttextencoderdecoder": "^1.0.22",
    "joi": "^17.5.0",
    "moment": "^2.29.1",
    "react": "17.0.2",
    "react-error-boundary": "^3.1.4",
    "react-native": "0.66.3",
    "react-native-app-auth": "^6.4.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-iap": "^7.5.1",
    "react-native-keychain": "^8.0.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-markdown-display": "^7.0.0-alpha.2",
    "react-native-orientation-locker": "^1.4.0",
    "react-native-pager-view": "^5.4.9",
    "react-native-reanimated": "^2.3.0",
    "react-native-redash": "^16.2.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-shared-element": "^0.8.3",
    "react-native-svg": "^12.1.1",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^5.2.0",
    "react-native-webview": "^11.16.0",
    "react-navigation-shared-element": "^3.1.3",
    "react-query": "3.24.4"

[vyshakh]

I had similar issue, and I found out that react-native-reanimated package caused the issue for me. Please note that Reanimated 2 doesn't support remote debugging, only Flipper can be used for debugging. https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

[danpettay]

I am experiencing this same error although am not using metro-react-native-babel-preset, just metro. What I've found is booting up a brand new expo project (SDK 44, comes with metro 0.64) and upgrading to metro 0.65.2 causes the debugger issue, and downgrading back to 0.64 resolves it

[Rubon72]

I had similar issue, and I found out that react-native-reanimated package caused the issue for me. Please note that Reanimated 2 doesn't support remote debugging, only Flipper can be used for debugging. https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

how to debug webSocket in flipper?

[mukash]

The issue still persist in "react-native": "0.67.2" any help here?

[edritech93]

same issue for me

[sionel]

Do you use "react-native-performance"?

[lid3rs]

Installing @react-native-community/cli-debugger-ui + clearing application data in inspect solved this to me.

[omar-bear]

Fixed for me with upgrade react-native-reanimated to 2.7.0

[jkohlin]

@react-native-community/cli-debugger-ui

This is not helping for me I'm afraid 😟 It started after I built the app to an iPhone. Could it be react-native-iap? that's the only thing I installed recently.

[AndersonVanzo]

I've spend two days trying to solve this problem, but couldn't find any solution, so what I'm doing now is debug the app with Flipper, I don't like as much debug with Chrome but is the only solution I have found

[g-nogueira]

Installing @react-native-community/cli-debugger-ui + clearing application data in inspect solved this to me.

This worked for me. I did both the install and clearing the Expo data + cache in the phone.

[esadkrs]

Expo build app doesn't crash but still log the same error for me when debugger is on:

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

[jucoba]

same issue, Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4. Worked for me to uninstall Expo from Android, run expo start again, open on android, it install expo again on my device and then in worked.

[FatmaMahmoud698]

I face the error when I enable debug mode on the expo app

[FatmaMahmoud698]

@lid3rs I tried your step but still the same problem

[claudineibr]

Version 68.2 and noting!!!

[TkhiienLok]

I am on macOS, I installed React Native Debugger brew install react-native-debugger as it was adviced in corresponding section in the expo documentation https://docs.expo.dev/workflow/debugging/ , and the error was gone, so I was able to debug the app in vscode

[robin3317]

I've spend two days trying to solve this problem, but couldn't find any solution, so what I'm doing now is debug the app with Flipper, I don't like as much debug with Chrome but is the only solution I have found

WEIRD but true! I try to connect my app with flipper, it fails to connect but solve my issue. Still shows the same error in terminal but debugger is running on chrome devtool smoothly!

[agrittiwari]

Error in debuuger console

Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

 Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.

And the reanimated package version "react-native-reanimated": "~2.8.0", with autoupdates doesn't support the remote debugging, Flipper is the only option for now

As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported. Read

@PhilippLeh21 Thanks 🎩

[msgadi]

I am also facing the same issue. App runs fine but unable to debug. Getting same error. Tried all solution mentioned here.

[KrushnaNaghate]

I visited this page 2 and a half months ago and tried npm i @react-native-community/cli-debugger-ui from someone's answer, this does not work for me,

[MichelBahl]

For testing and using debugger I temporarily downgrade react-native-reanimated to "react-native-reanimated": "~2.3.0" and delete watchman cache watchman watch-del-all

[Gafum]

I cleared the cache of the expo app on the phone and it helped.

[rossnoble]

I've often run into this issue when I have a bad import or some other kind of type error that breaks the build. The app and the web debugger will usually boot, but the app gets hung on the loading screen and the metro log error is displayed. It can sometimes be a PITA to hunt down the issue, so it helps to run a typecheck to find the offending file.

Can't guarantee this applies to all cases mentioned in this thread, but worth a try if you're stuck.

[pawan9124]

This error start for me after I start debugging remotely in emulator ios, using command shift+m, toggle developer menu >enabled Debug Remote JS. Although disabling debug remote js helps to evade the error for now. But still looking for complete solution.

[Lucas-191435]

turn off the debugger , exit the debugger ,

desligue o debugger , saia do debugger ,

[cr7cr8]

Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4.js

I fixed it by reinstalling the ExpoGo on my phone.

[iamnabink]

I am too getting this exact issue Unable to resolve module ./debugger-ui/debuggerWorker.aca

"dependencies": { "expo": "~47.0.12", "react": "18.1.0", "react-native": "0.70.5" }

Any workaround? or should I just ignore this?

[ZexinW]

same issue for me

[MyTrainings2020]

After trying so many things mentioned above (with no fix), finally I did find the solution my own, go to your phone's app settings choose (expo go) app, i- Remove Cache ii- Remove App Data. restart the expo app on the phone.

run the server again (npm start or expo start)

it should work perfectly fine.

[robhogan]

It seems like folks are still encountering this issue frequently, and we’d like to do something about it. I haven’t been able to reproduce the problem though - if anyone who’s experiencing this could share as much detail as they can about their setup and sequence of events, ideally with a repro to clone, that’d be extremely helpful.

[Harikarthyk]

same issue for me.

When I stop Chrome debugging, the app works fine, but when I debug using Chrome, I get errors.

[k88manish]

It started happening for me when I upgraded my app to RN 0.71.

[shashant19]

Adding getTransformOptions to metro config transformer fixed the issue for me (RN - 71.6)

`transformer: {

  getTransformOptions: async () => ({
    transform: {
      experimentalImportSupport: false,
      inlineRequires: true,
    },
  }),
  ...

}`

[arnaudambro]

found here: https://github.com/react-native-community/cli/issues/1081#issuecomment-1025055453

• manually uninstall the app
• npm run start --reset-cache

done !

[alex-mironov]

adb reverse tcp:8081 tcp:8081 this is what helped me

[httol]

root reason maybe the who using react-native-reanimated library.

[RmondJone]

It's really frustrating, and it's been so long since this problem has not been solved. I read above that it was caused by the react-native-reanimation library, but there is no such library in my lock file.

Error info:

 BUNDLE  ./index.android.js

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from D:\ZczyOverland\PluginReact/.:

None of these files exist:
  * debugger-ui\debuggerWorker.aca173c4(.native|.native.jsx|.jsx|.native.js|.js|.native.ts|.ts|.native.tsx|.tsx|.native.json|.json)
  * debugger-ui\debuggerWorker.aca173c4\index(.native|.native.jsx|.jsx|.native.js|.js|.native.ts|.ts|.native.tsx|.tsx|.native.json|.json)
    at ModuleResolver.resolveDependency (D:\ZczyOverland\PluginReact\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:107:15)
    at DependencyGraph.resolveDependency (D:\ZczyOverland\PluginReact\node_modules\metro\src\node-haste\DependencyGraph.js:288:43)
    at D:\ZczyOverland\PluginReact\node_modules\metro\src\lib\transformHelpers.js:129:24
    at Server._resolveRelativePath (D:\ZczyOverland\PluginReact\node_modules\metro\src\Server.js:1072:12)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at a

PS D:\ZczyOverland\PluginReact> npx react-native info
info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13400
    Memory: 5.94 GB / 15.70 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version     2020.3.0.0 AI-203.7717.56.2031.7621141
    Visual Studio: Not Found
  Languages:
    Java: 11.0.18 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: 6.4.0 => 6.4.0
    react: 17.0.2 => 17.0.2
    react-native: 0.65.3 => 0.65.3
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'],
  },
};

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

package.json

  "dependencies": {
    "@react-navigation/bottom-tabs": "6.5.7",
    "@react-navigation/material-top-tabs": "6.6.2",
    "@react-navigation/native": "6.1.6",
    "@react-navigation/native-stack": "6.9.12",
    "date-fns": "2.30.0",
    "react": "17.0.2",
    "react-native": "0.65.3",
    "react-native-fast-image": "8.6.3",
    "react-native-gesture-handler": "2.9.0",
    "react-native-modal": "13.0.1",
    "react-native-pager-view": "6.0.1",
    "react-native-picker": "4.3.7",
    "react-native-safe-area-context": "4.5.1",
    "react-native-screens": "3.20.0",
    "react-native-tab-view": "3.5.1",
    "react-native-webview": "11.26.1",
    "rmc-date-picker": "6.0.10",
    "use-subscription": ">=1.0.0 <1.6.0",
    "react-freeze": "1.0.3",
    "zustand": "4.3.8"
  }，
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@tsconfig/react-native": "2.0.3",
    "@types/react": "17.0.2",
    "@types/react-native": "0.65.3",
    "@react-native-community/cli": "6.4.0",
    "metro-react-native-babel-preset": "0.66.0",
    "prettier": "2.8.8",
    "typescript": "4.9.5"
  }