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

krisidmisso · 2023-08-18T16:01:23Z

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

The text was updated successfully, but these errors were encountered:

github-actions · 2023-08-18T16:01:39Z

⚠️	Missing Reproducible Example
ℹ️	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 · 2023-08-21T12:51:39Z

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 · 2023-09-08T01:06:05Z

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 software-mansion/react-native-reanimated#4673

ArnabXD · 2023-09-12T11:57:00Z

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 · 2023-12-06T09:48:09Z

+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 · 2024-05-22T15:20:12Z

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 · 2024-05-23T01:48:17Z

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

Lakston · 2024-05-23T06:41:15Z

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 · 2024-05-23T17:24:26Z

@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

krisidmisso added the Needs: Triage 🔍 label Aug 18, 2023

github-actions bot added the Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. label Aug 18, 2023

cortinico mentioned this issue Aug 22, 2023

ios: after updating react-native version(0.72.4), Not able to debug the app #39101

Closed

krisidmisso closed this as completed May 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

krisidmisso commented Aug 18, 2023

github-actions bot commented Aug 18, 2023

vksgautam1986 commented Aug 21, 2023 •

edited

Loading

krisidmisso commented Sep 8, 2023

ArnabXD commented Sep 12, 2023 •

edited

Loading

NiharR27 commented Dec 6, 2023 •

edited

Loading

Lakston commented May 22, 2024 •

edited

Loading

krisidmisso commented May 23, 2024

Lakston commented May 23, 2024 •

edited

Loading

krisidmisso commented May 23, 2024

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

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

Comments

krisidmisso commented Aug 18, 2023

Description

React Native Version

Output of npx react-native info

Steps to reproduce

Snack, screenshot, or link to a repository

github-actions bot commented Aug 18, 2023

vksgautam1986 commented Aug 21, 2023 • edited Loading

krisidmisso commented Sep 8, 2023

ArnabXD commented Sep 12, 2023 • edited Loading

Edit :

The issue

Tried so far

Environment

yarn react-native doctor :

NiharR27 commented Dec 6, 2023 • edited Loading

Lakston commented May 22, 2024 • edited Loading

krisidmisso commented May 23, 2024

Lakston commented May 23, 2024 • edited Loading

krisidmisso commented May 23, 2024

Output of `npx react-native info`

vksgautam1986 commented Aug 21, 2023 •

edited

Loading

ArnabXD commented Sep 12, 2023 •

edited

Loading

`yarn react-native doctor` :

NiharR27 commented Dec 6, 2023 •

edited

Loading

Lakston commented May 22, 2024 •

edited

Loading

Lakston commented May 23, 2024 •

edited

Loading