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

mmafrar commented 4 years ago

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 commented 4 years ago

+ Had the same problem, please help!

Esemesek commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

Esemesek commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

VitaliyGaliy commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

r0b0t3d commented 4 years ago

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

VitaliyGaliy commented 4 years ago

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 commented 4 years ago

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

VitaliyGaliy commented 4 years ago

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

mmafrar commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

anujmv commented 4 years ago

Hi Guys, was having the same problem and was unable to interact with the App. But only on the device. This solution may work (tried only on windows and android device)

visit chrome://inspect/ you will see the listed device connected. If an android device is connect you can view Chrome(version) along with enter url option next to it. enter the http://localhost:8081/debugger-ui/ and click open. this will create a tab(below the enter url option,will take a sec or few) click inspect. this will open a chrome inspect element in which you can view debugger console. see if the app interacts as expected and Touchable elements are working fine.

if it works fine. the pc remote debugger time sync is the issue. set time manually for both pc and the device and check, this should fix the problem.

hjhimanshu01 commented 4 years ago

probably it's due to different versions of the modules , @r0b0t3d solution works for me!

sudpmishra commented 4 years ago

Hi @timhagn, I am getting this issue only while debugging using physical device. I quite did not understand what you said about deactivating automatic time.

timhagn commented 4 years ago

Hi @sudpmishra,

drifting debugger and device times is quite an old problem for many, this time it seems to have really reached us on a basic level (Touchables). Like stated by @alexciarillo in an issue comment over at the react-native repo:

I believe I ended up tracking this down to an issue with there being a time difference between the host and device. Since the time is off, the calculation for whether it was a short press or long press is broken (or something like that). You can verify this by running adb shell "date" && date to see if the times are off. I think I was usually able to fix this by going into the device settings, disabling automatic time resolution, and then re-enabling it. I think there was also a way to do this via an adb command but can't recall what it is.

As my previously mentioned solution sadly only works on rooted devices (Android 6 & up, I think), one is at least possible ("the way to do this via an adb command"):

# Deactivate automatic device time:
adb shell settings put global auto_time 0
# Reactivate automatic device time via an ntp server:
adb shell settings put global auto_time 1

No guarantees, but I hope it helps : ).

Best,

Tim.

khuongphp commented 4 years ago

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.

I resolved this issue by install version "@react-native-community/cli-debugger-ui": "3.0.0"

pvanny1124 commented 4 years ago

I am also having difficulties with this. Nothing above works^. Any have another solution?

khuongphp commented 4 years ago

@pvanny1124 I think you should clean and rebuild you application cd android && gradlew.bat clean && cd ../ && npx react-native run-android

AlexDM0 commented 4 years ago

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!

thymikee commented 4 years ago

@AlexDM0 changing babel config invalidated Metro cache most likely

AlexDM0 commented 4 years ago

I cleared the watchman cache, react-native start --clear-cache etc. Tried everything I could find. Hope it helps someone!

Edit: and the cache clearing didnt fix it, only removing the plugin from the babel config solved my issue. To be fair, I added that plugin a few days ago because jest wanted it.

pvanny1124 commented 4 years ago

@AlexDM0 I don't have that plugin, so something seems very off. here's my package.json:

{
    "name": "sample",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint --fix --ignore-path .gitignore --ignore-path .eslintignore .",
        "reset": "react-native start --reset-cache",
        "build-apk": "cd android && ./gradlew assembleRelease",
        "testflight": "cd ios && pod install && fastlane beta",
        "pod-install": "cd ios && pod install",
        "android-bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle",
        "xcode": "cd ios && xed ."
    },
    "dependencies": {
        "@react-native-community/async-storage": "^1.9.0",
        "@react-native-community/cli-debugger-ui": "^4.7.0",
        "@react-native-community/masked-view": "^0.1.10",
        "@react-native-firebase/app": "^6.7.1",
        "@react-native-firebase/auth": "^6.7.1",
        "@react-native-firebase/messaging": "^6.7.1",
        "@react-navigation/compat": "^5.1.10",
        "@react-navigation/drawer": "^5.5.1",
        "@react-navigation/native": "^5.1.7",
        "@react-navigation/stack": "^5.2.14",
        "jwt-decode": "^2.2.0",
        "lodash": "^4.17.15",
        "moment": "^2.24.0",
        "native-base": "^2.13.12",
        "node-emoji": "^1.10.0",
        "node-fetch": "^2.6.0",
        "react": "16.11.0",
        "react-native": "0.62.2",
        "react-native-fade-in-view": "^1.0.6",
        "react-native-fast-image": "^8.1.5",
        "react-native-fbsdk": "^1.1.2",
        "react-native-gesture-handler": "^1.6.1",
        "react-native-keyboard-spacer": "^0.4.1",
        "react-native-mixpanel": "^1.2.0",
        "react-native-picker-select": "^7.0.0",
        "react-native-reanimated": "^1.8.0",
        "react-native-safe-area-context": "^0.7.3",
        "react-native-screens": "^2.7.0",
        "react-native-size-matters": "^0.3.0",
        "react-native-vector-icons": "^6.6.0",
        "react-native-video": "^4.4.5",
        "redux": "^4.0.5",
        "socket.io-client": "^2.3.0"
    },
    "devDependencies": {
        "@babel/core": "7.9.0",
        "@babel/runtime": "7.9.2",
        "@react-native-community/eslint-config": "0.0.5",
        "babel-jest": "24.9.0",
        "babel-plugin-transform-inline-environment-variables": "^0.4.3",
        "eslint": "6.8.0",
        "jest": "^24.9.0",
        "metro-react-native-babel-preset": "0.58.0",
        "react-native-clean-project": "^3.3.0",
        "react-test-renderer": "16.11.0"
    },
    "resolutions": {
        "@react-native-community/cli-debugger-ui": "4.7.0"
    },
    "jest": {
        "preset": "react-native",
        "testPathIgnorePatterns": [
            "node_modules/(?!(react-[a-z, -]*|react-native|native-base-[a-z, -]*|react-native-[a-z, -]*)/)",
            "/node_modules/@react-native-community/async-storage/(?!(lib))"
        ],
        "transformIgnorePatterns": [
            "node_modules/(?!(@react-native-community|react-native|react-navigation))"
        ],
        "setupFiles": [
            "./jestSetupFile.js"
        ]
    }
}

pvanny1124 commented 4 years ago

I should mention that this is happening to my iOS build

bhashasayyad commented 4 years ago

I solved this issue, check your app name

AppRegistry.registerComponent('realmapp', () => appContainer)

app name was the issue in my case

farukyazici commented 4 years ago

Nothing mentioned here solved my issue. I'm having this both on Android and iOS.

The error log is: ui.bcd3f9d1.js:16 GET http://localhost:8081/debugger-ui/debuggerWorker.cff11639.js 404 (Not Found)

And there are following errors in debugger network:

douglasoliveiraadv commented 4 years ago

Same problem here with file debuggerWorker.cff11639.js ! None of the above solutions worked for me.

LucasLpr commented 4 years ago

Same issue, the only solution who worked for me was to downgrade React native ...

sefam-vbastien commented 4 years ago

I had the same issue.

I created a RN project 2 weeks ago and in my package-lock.json the version of the cli was set to 4.7.0 (included by react-native with ^4.5.1) -> everything worked fine But for a fresh install or a removal of package-lock + npm install it does install the version 4.8.0 -> It does display the error described above.

My solution for the moment is to freeze the version in the package-lock to the version 4.7.0.

If you have a better solution I would be happy to apply it.

knro commented 4 years ago

Same issue here, no solution worked with RN 0.62.2

tomchify commented 4 years ago

Hi all, I found I encountered this error when I had a bug in one my of components, not related to the debugger. My debugger window (http://localhost:8081/debugger-ui/) was open. I checked it and sure enough there was a console error that led me to the real issue.

ralph-dev commented 4 years ago

Just a heads up, deleted my node_modules and deleted my package-lock.json solved my issue. This is getting really annoying to do almost every time something gets stale. not sure why this keeps happening year after year.

xiaohui-hiwintech commented 4 years ago

Same issue when we used the "npx react-native init ***" created the lastest template. For now freeze the version "@react-native-community/cli-debugger-ui" to 4.7.0 works for me.

olegderecha commented 4 years ago

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

https://github.com/facebook/react-native/issues/28531#issuecomment-612465766

thobhanifreddy commented 4 years ago

I fixed it by disabling remote debugger and reenabling it.

kevmmdev commented 4 years ago

this was the solution for me https://stackoverflow.com/a/60755519/1557613

react-native-community / cli