0.72.2 Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

[edstbbz]

Description

After update to 0.72.2 and connect to chrome debugger an error appears:

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.

React Native Version

0.72.2

Output of npx react-native info

System:
OS: macOS 13.4.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 2.95 GB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.13.0
path: /usr/local/bin/node
Yarn:
version: 3.2.1
path: /usr/local/bin/yarn
npm:
version: 8.1.0
path: /usr/local/bin/npm
Watchman:
version: 2022.10.24.00
path: /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms:
- DriverKit 21.4
- iOS 16.0
- macOS 12.3
- tvOS 16.0
- watchOS 9.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode:
version: 14.0.1/14A400
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.11
path: /usr/bin/javac
Ruby:
version: 2.6.5
path: /Users/user/.rvm/rubies/ruby-2.6.5/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.2
wanted: 0.72.2
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: false
newArchEnabled: false

Steps to reproduce

1. start project
2. connect to chrome debugger

Snack, code example, screenshot, or link to a repository

[emanuelasistensi]

same problem here

[emanuelasistensi]

Same problem here, I leave evidence: project recently created with react-native 0.72.3

[AshlandWest]

Replicated on fresh install of RN 72.3, but app seems to run okay after throwing error.

[Danushka50]

Reproduced in RN 72.3.... Any Solution!!!

Also got below error in console

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from /Users/******/******/*******/.: 

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/******/******/*******/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
    at DependencyGraph.resolveDependency (/Users/******/******/*******/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at /Users/******/******/*******/WordsPuzzelGame/node_modules/metro/src/lib/transformHelpers.js:169:21
    at Server._resolveRelativePath (/Users/******/******/*******/node_modules/metro/src/Server.js:1045:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Server._explodedSourceMapForBundleOptions (/Users/******/******/*******/node_modules/metro/src/Server.js:993:35)
    at async Promise.all (index 1)
    at async Server._symbolicate (/Users/******/******/*******/node_modules/metro/src/Server.js:945:26)
    at async Server._processRequest (/Users/******/******/*******/node_modules/metro/src/Server.js:418:7)
 LOG  JavaScript logs will appear in your browser console

[kitety]

I also encountered the same problem, but I don't know how to solve it.
"react-native": "0.72.3"

[gabrielmenezesnog]

same. I've created a new project with react-native v0.72.3 and still get this problem.

[tlt254]

Me too

[nicson0427]

is this gonna affect prod?
or is just debug will prompt this error and doesnt affect other code

[cheikhsidi]

Any update on this issue?

[arrywu]

Me too! Could anyone help us?

[a7madgamal]

Any feedback about this is appreciated

[Dror-Bar]

Is there any way to remove this red warning?

Edit:
Following this answer, I changed callNativeSyncHook in the file node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js like this:

callNativeSyncHook(
    moduleID: number,
    methodID: number,
    params: mixed[],
    onFail: ?(...mixed[]) => void,
    onSucc: ?(...mixed[]) => void,
  ): mixed {
    this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
    if (global.nativeCallSyncHook) return global.nativeCallSyncHook(moduleID, methodID, params);
  }

and saved it with patch-package. This seems to have fixed all error messages.

[Jabed-Akhtar]

react version: 18.2.0
react-native version: 0.72.4

[chenweigh]

same problem +1

and the solution:

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