React-native: Calling synchronous methods on native modules is not supported in Chrome

[i7soft]

Call the synchronized api, this appears:

React Native version:

React Native Environment Info:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
Memory: 19.07 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.7.0 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 6.10.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 7, 8, 9
Build Tools: 22.0.1, 23.0.1, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0, 29.0.1, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5791312
Xcode: 11.0/11A420a - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.10 => 0.59.10
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-create-library: 3.1.2

Steps To Reproduce

1.
2.

Describe what you expected to happen:

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

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.61 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[i7soft]

@react-native-bot

I have updated to the latest version, but I still have this error.

info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
    Memory: 30.93 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.7.0 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.10.0 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 7, 8, 9
      Build Tools: 22.0.1, 23.0.1, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0, 29.0.1, 29.0.2
      System Images: android-28 | Google APIs Intel x86 Atom
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7

[zhigang1992]

imho, it should this be in

https://github.com/react-native-community/react-native-device-info/issues/776

[i7soft]

@zhigang1992 the error string is from:
/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js line 186:

if (__DEV__) {
      invariant(
        global.nativeCallSyncHook,
        'Calling synchronous methods on native ' +
          'modules is not supported in Chrome.\n\n Consider providing alternative ' +
          'methods to expose this method in debug mode, e.g. by exposing constants ' +
          'ahead-of-time.',
      );
    }

[i7soft]

It seems that the api with the sync mark has this error.
ios: RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD
android: isBlockingSynchronousMethod=true

[TheNoodleMoose]

@i7soft Did you ever find a solution for this problem? Currently experiencing this right now, and not being able to use a debugger is rough.

update: Our problem ended up being related to a rollbar version upgrade, https://github.com/rollbar/rollbar-react-native/issues/101

[i7soft]

@TheNoodleMoose no💔,i am waitting a solution

[TheNoodleMoose]

@i7soft Was react native the only thing you have updated? Ours was working after our React Native upgrade to the latest version, what broke it was a different package being upgraded. We used git bisect to find the culprit.

[i7soft]

@TheNoodleMoose i try this:

1. react-native init demo👈 the lastest version
   2.add package "react-native-device-info" to the demo
   3.add code to App.js:

import DeviceInfo from 'react-native-device-info';
console.log(DeviceInfo.isCameraPresentSync());👈 call a sync function

4.open debug mode
5.restart app,then show:

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.

[TheNoodleMoose]

@i7soft So since it seems to be the react-native-device-info package, I think they figured out the solution was to have a check for whether you: 1. Have a debugger or 2. Are in development mode. If either of those is present, then just mock the sync value. It's a shame but there was good reasoning behind it. Here is link discussing the solution: https://github.com/react-native-community/react-native-device-info/issues/776#issuecomment-533410011

[i7soft]

@TheNoodleMoose I use react-native-device-info just for example. In fact, I need to develop synchronous native features. I found that when debugging, I can't use the synchronous method. I don't know if it's my problem, or react native will improve this in the future.

[cjddny]

I also meet this problem, i can not find any method to debug when i use synchronous method

[KarlHerler]

Ran into this problem when upgrading to react native 0.62.0. Still present.

We are using react-native-device-info version 5.5.3. However it seems the issue was caused by the new Appearance.getColorScheme() code. I removed my calls to it and its working fine now.

[nechmads]

Same here. Removing calls to Appearance in version 0.62 solved it.
I reverted back to using expo/react-native-appearance package

[Johan-dutoit]

Can confirm that this happens with the Appearance API on the latest version (0.62)

[kelset]

hey folks, thanks for surfacing this issue - we are putting it in front of the team that worked on it so that they can help us understand how to get this fixed.

[couch4]

Still getting this, but in react-native-svg on Path.isPointInFill() method.

Unsure if it's a react-native-svg or react-native problem?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.