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?

Answer 1

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

Answer 2

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.

Answer 3

There is no need to modify or patch any npm package for this anymore.

The issue is fixed by react native 0.66.

Ref:

• Stack Overflow Answer
• Github Issue/Comment