search

facebook / metro

🚇 The JavaScript bundler for React Native
https://metrobundler.dev
MIT License
5.22k stars 624 forks source link

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

Open omar-bear opened 2 years ago

omar-bear commented 2 years ago

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

RmondJone commented 1 year ago

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"
  }

I hope to pay attention to this problem, because this should be the most basic function of the RN framework. If you can’t even use debug, then we really consider switching to Flutter. After all, Flutter doesn’t have these problems.

RmondJone commented 1 year ago

I guess it is the problem here. The code is ./debugger-ui/debuggerWorker, but the node_modules is cli-debugger-ui. I will verify it later. It is estimated that it has something to do with this

07E)R{@FQAMZCS(JNHK`I7J

RmondJone commented 1 year ago

image It still doesn’t work. Even if I change the path to the right one, it’s useless to find it. It’s a white screen when I enter

hileix commented 1 year ago

I have the same issue. But if I visit the debug URL: http://localhost:8081/debugger-ui/, it works for me, and then the error disappears.

IncrediblePony commented 1 year ago

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

I assume it is because the debugger looks for some sort of filesystem/files that would correspond with a debugger. When I open my emulator in debug mode with "just" the Firefox debugger this message "comes to life". When I open it with React Native Debugger it goes away. In and of itself the error message is pretty useless, and it creates unnecessary noise. It doesn't seem to crash or in other ways harm performance (more than usual at least).

Installing and running Flipper might work. Running the React Native Debugger extension for Chrome might work. Visiting the debugger ui URL as suggested by @hileix might also work

lazaro-contato commented 1 year ago

I tried many solutions about this and nothing works. For me the solution was to install Flipper (https://fbflipper.com/) and debug the entire project with it. For some reason React Native Debbugger doesn't work very well with React Reanimated.

kuldeepworkid commented 11 months ago

For me, it was working in real device but getting this error in simulator. Im using React Native debugger. I resolved it by following steps:

Run the app in real device and turn on the debug mode. (logs started showing in the debugger) Now run the app in the simulator without debug mode. Now turn on the debug mode in simulator. Now the log will start showing in the debugger.