krisidmisso commented 1 year ago

Description

"Calling synchronous methods on native modules is not supported in Chrome" on the latest version 0.72.4. Debugging made impossible with the new versions of RN:

Flipper doesnt work with use_framework! (When it works its super laggy, same as good as a terminal since there is no formatting options for large logs/objects)
Firebase doesnt work without use_framework! - So Flipper needs to be disabled
Chrome debug isnt working anymore (Hermes on/off)
With hermes enabled there is no debug option for chrome, other debug options dont work
Hermes disabled and debug with chrome doesnt work

React Native Version

0.72.4

Output of `npx react-native info`

System:
  OS: macOS 13.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 88.94 MB / 16.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 16.16.0
    path: ~/.nvm/versions/node/v16.16.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v16.16.0/bin/yarn
  npm:
    version: 8.11.0
    path: ~/.nvm/versions/node/v16.16.0/bin/npm
  Watchman:
    version: 2023.07.24.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.11.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.2
      - iOS 16.2
      - macOS 13.1
      - tvOS 16.1
      - watchOS 9.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.2 AI-212.5712.43.2112.8609683
  Xcode:
    version: 14.2/14C18
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.16
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.4
    wanted: 0.72.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: false

Steps to reproduce

Create a new version of RN with Firebase

Snack, screenshot, or link to a repository

github-actions[bot] commented 1 year ago

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

vksgautam1986 commented 1 year ago

Hi , you can try this solution in your node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js i was also having the same error for android and i applied this patch for it and it worked for me.

    moduleID: number,
    methodID: number,
    params: any[],
    onFail: ?Function,
    onSucc: ?Function,
  ): any {
    const isDebuggingEnabled = (typeof atob !== 'undefined');
    this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
    if(!isDebuggingEnabled)
    {
      return global.nativeCallSyncHook(moduleID, methodID, params);
    }
  }

https://stackoverflow.com/questions/61067004/invariant-violation-calling-synchronous-methods-on-native-modules-is-not-suppor

krisidmisso commented 1 year ago

thank you @vksgautam1986 it worked only on ios. But this modification resulted in other issues with reanimated (and skia). I had to do a full clean of the project to be able to run it again https://github.com/software-mansion/react-native-reanimated/issues/4673

ArnabXD commented 1 year ago

Edit :

I changed the device, now hermes debugger connects properly
I had no idea we didn't need to enable remote js debug when using hermes debugger on flipper

I am facing similar issues with debuggers.

The issue

When I clean install the debug build (connected with metro as well), and then press debug, it opens the chrome developer menu, and results the above error (but from react-native-mmkv in my case).

LOG  Running "XxxXxx" with {"rootTag":31}
info Opening developer menu...
info Launching Dev Tools...
BUNDLE  ./index.js 

LOG  JavaScript logs will appear in your browser console
Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from /Users/arnab/dev/arnab/XXXXXX.: 

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/Users/arnab/dev/arnab/XXXXXX/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
    at DependencyGraph.resolveDependency (/Users/arnab/dev/arnab/XXXXXX/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at /Users/arnab/dev/arnab/XXXXXX/node_modules/metro/src/lib/transformHelpers.js:169:21
    at Server._resolveRelativePath (/Users/arnab/dev/arnab/XXXXXX/node_modules/metro/src/Server.js:1045:12)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Server._explodedSourceMapForBundleOptions (/Users/arnab/dev/arnab/XXXXXX/node_modules/metro/src/Server.js:993:35)
    at async Promise.all (index 1)
    at async Server._symbolicate (/Users/arnab/dev/arnab/XXXXXX/node_modules/metro/src/Server.js:945:26)
    at async Server._processRequest (/Users/arnab/dev/arnab/XXXXXX/node_modules/metro/src/Server.js:418:7)

Tried so far

I have tried to use flipper, even though I have flipper opened, clicking on debug opens up the chrome debugger ui and resulting the above error.
I can connect to react-native-debugger but not to flipper hermes debugger.

Environment

System : Mac (M1)
Issue on : Android (didn't check iOS)
Android Version : 12L
Device Model : Redmi Y2
Flipper Version : 0.216.0
React Native : 0.72.4

`yarn react-native doctor` :

Common
 ✓ Node.js - Required to execute JavaScript code
 ✓ yarn - Required to install NPM dependencies
 ✓ Watchman - Used for watching changes in the filesystem when in development mode

Android
 ✓ Adb - Required to verify if the android device is attached correctly
 ✓ JDK - Required to compile Java code
 ✓ Android Studio - Required for building and installing your app on Android
 ✓ Android SDK - Required for building and installing your app on Android
 ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation

iOS
 ✓ Xcode - Required for building and installing your app on iOS
 ✓ Ruby - Required for installing iOS dependencies
 ✓ CocoaPods - Required for installing iOS dependencies
 ✓ ios-deploy - Required for installing your app on a physical device with the CLI
 ✓ .xcode.env - File to customize Xcode environment

Errors:   0
Warnings: 0

NiharR27 commented 10 months ago

+1

We used react native debugger with HERMES turned on, had to add react-native-devsettings to make it working. The default HERMES debugger isn't as advanced. Can't use flipper due to long old battle of Firebase vs flipper issues. Also was reading this discussion regarding flipper and react native: https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0641-decoupling-flipper-from-react-native-core.md.

Seems like since bumping to 0.72.7 and the packages, we have lost ability to even debug via the react-native-debugger :c

Lakston commented 4 months ago

RN devsettings doesn't seem to work with v0.73+, so we cant use react-native-debugger anymore, how are we supposed to debug, access the redux state etc... ?

krisidmisso commented 4 months ago

use this instead of flipper: react-native start --experimental-debugger (press j in the terminal after running the app)

Lakston commented 4 months ago

I did, but the app crashes on startup with the saame error you posted in the initial post.

and in the console: Unable to resolve module ./debugger-ui/debuggerWorker

also, I dont think the experimental debugger allows us to see the redux state

krisidmisso commented 4 months ago

@Lakston it may be another 3rd party library that crashes your app. For me it was mmkv. I upgraded the framework to 0.73.x and removed that 3rd party library when debugging. For redux you can use redux-logger middleware. Not sure if Reactotron has been updated to use jsi buts its worth a shot if you like to mod your redux store

facebook / react-native

Imposible to debug on the new versions of RN 0.72.x #39080

Description

React Native Version

Output of `npx react-native info`

Steps to reproduce

Snack, screenshot, or link to a repository

Edit :

I had no idea we didn't need to enable remote js debug when using hermes debugger on flipper

The issue

Tried so far

Environment

`yarn react-native doctor` :

facebook / react-native

Imposible to debug on the new versions of RN 0.72.x #39080

Description

React Native Version

Output of npx react-native info

Steps to reproduce

Snack, screenshot, or link to a repository

Edit :

I had no idea we didn't need to enable remote js debug when using hermes debugger on flipper

The issue

Tried so far

Environment

yarn react-native doctor :

Output of `npx react-native info`

`yarn react-native doctor` :