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

[Gagik-arch]

I have the some problem.

[iriscoopers]

Ran into it as well, but the docs state remote debugging in Chrome is deprecated since 0.72

Copy pasting from the docs:

If your project still relies on this feature, you can manually enable it manually through the NativeDevSettings.setIsDebuggingRemotely function.

import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';
export default function App() {
  useEffect(() => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  }, []);

  return <MyApp />;
}

Haven't tried it myself but hope this helps

[gusilveiramp]

+1

[jehillert]

So wait, does this mean in the future we are going to be stuck with flipper? I got nothing against it. It's just rn-debugger fits like a glove. I've tried probably 5-6 times now to get used to the alternatives and they just aren't as comfortable.

[lazaro-contato]

updates?

[valery-lavrik]

The documentation says that this is specially done, but you can disable it

NativeDevSettings.setIsDebuggingRemotely(true);

But once you enable this option, the application starts to restart endlessly

[Mr-BeanSir]

The same problem occurs

[lazaro-contato]

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.

[sivamani-edumpus]

Same propelem me

[XilinJia]

same problem +1

and the solution:

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

that doesn't work for me.

[ck837]

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:根据这个答案，我在文件 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js 中更改了 callNativeSyncHook ，如下所示：

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.并将其与补丁包一起保存。这似乎已经修复了所有错误消息。

I try this and it succeeds.No error msg! Thanks bro!

[wieckowskimateusz]

same in RN 0.72.6

[t-fritsch]

@lazaro-contato The problem with Flipper is that last year, in their 2022 survey, RN team said that flipper wasn't the right tool anymore and that they were working on better debugging tools "that meets our standard"

So flipper isn't the right tool (it's sad because it was promising, having native debug tools like logcat, etc. alongside with react and js devtools is a great idea, but it's so heavy and buggy that I must agree with the RN team on this point). But in the same time chrome debugging is suffering from this bug since months with apparently no intention from the team to work on it.

I hope the new debug tools will arrive very soon, debugging XP in RN is such a major pain point

Edit: with react native debugger, the error still shows-up in devtools console but apparently not in the in-app Logbox. A little less annoying 😅

[williamgurzoni]

@lazaro-contato The problem with Flipper is that last year, in their 2022 survey, RN team said that flipper wasn't the right tool anymore and that they were working on better debugging tools "that meets our standard"

So flipper isn't the right tool (it's sad because it was promising, having native debug tools like logcat, etc. alongside with react and js devtools is a great idea, but it's so heavy and buggy that I must agree with the RN team on this point). But in the same time chrome debugging is suffering from this bug since months with apparently no intention from the team to work on it.

I hope the new debug tools will arrive very soon, debugging XP in RN is such a major pain point

Edit: with react native debugger, the error still shows-up in devtools console but apparently not in the in-app Logbox. A little less annoying 😅

100% what @t-fritsch said. Debugging is such a pain point.

[afcanop]

+1

[brownieboy]

Ran into it as well, but the docs state remote debugging in Chrome is deprecated since 0.72

Copy pasting from the docs:

If your project still relies on this feature, you can manually enable it manually through the NativeDevSettings.setIsDebuggingRemotely function.

import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';
export default function App() {
  useEffect(() => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  }, []);

  return <MyApp />;
}

Haven't tried it myself but hope this helps

This crashed my app every time. Presumably, others here had the same experience, hence all the thumbs' down.