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

Question

I have forked this React library for use with React Native and have got it working by installing react-native-svg, use-elapsed-time and prop-types:

https://github.com/vydimitrov/react-countdown-circle-timer

However I now am not able to use the debugger:

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.

This error is located at: in CountdownCircleTimer (at AppRoot.js:118) in AppRoot (at App.js:9) in Provider (at App.js:8) in App (at renderApplication.js:40) in RCTView (at AppContainer.js:101) in RCTView (at AppContainer.js:119)

I have searched high and low for any clues as to which package could be causing the error and I can only see the issue reported relating to react-native-device-info but this is not causing the problem. What does the error mean an how can I begin to debug this if there is such little information around about it?

Same issue if ure using react-native-skia with chrome debugging mode ON. Chrome debugger is not recommended way of debug moving forward https://github.com/Shopify/react-native-skia/issues/326 — TylerC, Aug 21 '22 at 09:44

score 56 · Accepted Answer · answered Mar 11 '21 at 13:34

56

This is temporary fix. This is working perfectly on my side. you have to edit this file

node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js

callNativeSyncHook(
    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);
    }
  }

you can also use patch-package to patch it permanently.

underlaying issue

answered Mar 11 '21 at 13:34

Muhammad Numan

23,222
6
63
80

3

What changes i have to do! replace the whole block of code? – Zeeshan Ahmad Khalil Apr 24 '22 at 13:27
Using fresh install of RN 0.68.1 and still got this issue... the hack helped - strange this is what I had to do (did not find other solutions) – chenop May 10 '22 at 07:15
Life-saving hack, I am using RN v0.67.4 – Lahiru Amarathunge May 31 '22 at 17:36
@Zeeshan There is a function in this file called "callNativeSyncHook", just replace this function code block with the one given by Muhammad. – Katharsin Jun 13 '22 at 16:00
@Katharsin thanks for my case issue was different, react-native already merged a pull req which had the above changes. – Zeeshan Ahmad Khalil Jun 13 '22 at 19:03

score 4 · Answer 2 · answered Sep 11 '21 at 03:19

4

For anyone else landing here from a Google search, things seem to have changed greatly since 2011 in regards to this issue (which isn't surprising).

If you try @MuhammadNuman's solution you will just get a different error about global.nativeCallSyncHook not being a function.

The workaround I'm using for this is to simply return anything else from callNativeSyncHook. E.g.:

callNativeSyncHook(
    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 "Meh, I have no idea what's going on here, but at least this gets rid of the annoying error!";
    }
}

I'd be very interested to know if there's a "proper" way to fix this post 2011, but for now this is good enough for me.

answered Sep 11 '21 at 03:19

Kenny83

769
12
38

Bizarre. I just got this error again and forgotten about what the solution was till I came back here (it's been a bad dev day). I checked the MessageQueue.js file and it had reverted back to the original code? I implemented this fix and the error has gone again. Maybe I can write some code now instead of putting out fires!! Yes it was me who upvoted to get you to 0 lol – gfmoore Oct 01 '21 at 12:52
LOL thanks again, and I know what you mean re: "having a bad dev day" and "writing code instead of putting out fires". Frustrating, isn't it? Anyway I'm just guessing here, but the error "bizarrely coming back" was probably caused by yarn, which completely rebuilds your `node_modules` folder every time you run **any** yarn-related command. I got bitten by the same thing recently, so I now consider [patch-package](https://www.npmjs.com/package/patch-package) to be invaluable when hacking 3rd party code like this. Wish it wasn't necessary but alas, no dev/team is perfect. Anyway happy coding ;-) – Kenny83 Oct 03 '21 at 13:53

score 0 · Answer 3 · answered Jun 21 '22 at 01:14

0

I am using RN 0.67.3. This error was found in Galaxy S22 in debug mode. I rerun yarn android and the error has gone.

answered Jun 21 '22 at 01:14

MoonTaeTae

51
6

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

3 Answers3

Linked