Debugger causes error in chrome and blank screen in App

Environment

OS: macOS 12.3.1
    CPU: (10) x64 Apple M1 Max
    Memory: 81.19 MB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2
    react-native: 0.68.0 => 0.68.0
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Description

When I start debug in Chrome, the App screen is blanked out and I get this error message in the react console:

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)
    at ModuleResolver.resolveDependency (/Users/kojo/Documents/Projekt/Egna/bas068/Bas/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:136:15)

and in chrome I get this:

index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=se.lejman.bask…:22543 Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

And a console log saying: Failed to mount LogBox within 1s

Reproducible Demo

Unfortunately I don’t have one that I can share…

[pankaj-bhardwaj]

have upgraded the react native version 0.63.xx to 0.67.xx using command ‘npx react-native upgrade’ iOS working as expected with and without debugger but in android it is working as expected without debugger but if try to connect with debugger i.e react-native-debugger, chrome browser, firefox browser the android app getting crashed and throwing below error and warnings

After try to connect with debugger

1. showing error on debugger console,

File name: ExceptionsManager.js:149 Error: i. 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. ii. Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

1. showing error on terminal where packager starts,

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from /Users/userdirectory/Projects/MyApp/.:

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) at ModuleResolver.resolveDependency (/Users/userdirectory/Projects/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:107:15) at DependencyGraph.resolveDependency (/Users/userdirectory/Projects/MyApp/node_modules/metro/src/node-haste/DependencyGraph.js:288:43) at /Users/userdirectory/Projects/MyApp/node_modules/metro/src/lib/transformHelpers.js:129:24 at Server._resolveRelativePath (/Users/userdirectory/Projects/MyApp/node_modules/metro/src/Server.js:1072:12) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Server._explodedSourceMapForURL (/Users/userdirectory/Projects/MyApp/node_modules/metro/src/Server.js:1028:35) at async Promise.all (index 1) at async Server._symbolicate (/Users/userdirectory/Projects/MyApp/node_modules/metro/src/Server.js:979:26) at async Server._processRequest (/Users/userdirectory/Projects/MyApp/node_modules/metro/src/Server.js:403:7)

LOG JavaScript logs will appear in your browser console

[nica0012]

I’m also having this issue.