Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling synchronous methods on native modules is not supported in Chrome #26705

Closed
i7soft opened this issue Oct 3, 2019 · 39 comments
Closed
Labels
Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging DX Issues concerning how the developer experience can be improved. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@i7soft
Copy link

i7soft commented Oct 3, 2019

Call the synchronized api, this appears:
image

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

Describe what you expected to happen:

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

@i7soft i7soft added the Bug label Oct 3, 2019
@react-native-bot
Copy link
Collaborator

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
Copy link
Author

i7soft commented Oct 3, 2019

@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
Copy link
Contributor

imho, it should this be in

react-native-device-info/react-native-device-info#776

@i7soft
Copy link
Author

i7soft commented Oct 3, 2019

@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
Copy link
Author

i7soft commented Oct 3, 2019

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

@TheNoodleMoose
Copy link

TheNoodleMoose commented Nov 12, 2019

@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, rollbar/rollbar-react-native#101

@i7soft
Copy link
Author

i7soft commented Nov 13, 2019

@TheNoodleMoose no💔,i am waitting a solution

@TheNoodleMoose
Copy link

@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
Copy link
Author

i7soft commented Nov 14, 2019

@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
Copy link

@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: react-native-device-info/react-native-device-info#776 (comment)

@i7soft
Copy link
Author

i7soft commented Nov 15, 2019

@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
Copy link

cjddny commented Dec 4, 2019

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

@KarlHerler
Copy link

KarlHerler commented Mar 30, 2020

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
Copy link

nechmads commented Apr 1, 2020

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

@Johan-dutoit
Copy link
Contributor

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

@kelset
Copy link
Contributor

kelset commented Apr 6, 2020

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.

@hramos hramos added DX Issues concerning how the developer experience can be improved. Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging and removed Bug Newer Patch Available labels Apr 6, 2020
facebook-github-bot pushed a commit that referenced this issue Apr 7, 2020
Summary:
The appearance module uses sync native module methods which doesn't work with the chrome debugger. This broke in 0.62: #26705

This fix makes the appearance module return 'light' when using the chrome debugger.

Changelog: [Fixed] Appearance `getColorScheme` no longer breaks the debugger

Reviewed By: yungsters

Differential Revision: D20879779

fbshipit-source-id: ad49c66226096433bc9f270e004ad4a6f54fa8c2
alloy pushed a commit that referenced this issue Apr 8, 2020
Summary:
The appearance module uses sync native module methods which doesn't work with the chrome debugger. This broke in 0.62: #26705

This fix makes the appearance module return 'light' when using the chrome debugger.

Changelog: [Fixed] Appearance `getColorScheme` no longer breaks the debugger

Reviewed By: yungsters

Differential Revision: D20879779

fbshipit-source-id: ad49c66226096433bc9f270e004ad4a6f54fa8c2
@stale
Copy link

stale bot commented Sep 20, 2020

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 stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 20, 2020
@stale
Copy link

stale bot commented Oct 4, 2020

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.

@stale stale bot closed this as completed Oct 4, 2020
@kaushikwavhal
Copy link

kaushikwavhal commented Jan 4, 2021

Still facing this on v0.63.3, although temporarily commenting out all the sync methods works.

@luskin
Copy link

luskin commented Jan 12, 2021

We are experiencing the same issue on 0.63.3

@numandev1
Copy link
Contributor

you can use this temporary solution https://stackoverflow.com/a/66583605/8079868

@madroneropaulo
Copy link

same here

@stdavis
Copy link

stdavis commented Apr 23, 2021

@kelset Did anything ever come from the team taking a look at this? I'm having the same issue attempting to debug with React Native Debugger.

@numandev1
Copy link
Contributor

@madroneropaulo @stdavis i made PR #31153 . but they closed PR by saying this is a feature. you have to patch react native like this https://stackoverflow.com/a/66583605/8079868

@stdavis
Copy link

stdavis commented Apr 23, 2021

@nomi9995 That patch from SO led to other errors for me.

@madroneropaulo
Copy link

@nomi9995 @stdavis I opened a new Issue, since I think the new one is related to the AuthRequest and not this one. expo/expo#12712

@29er
Copy link

29er commented Jun 16, 2021

why is this closed when it still occurs ?

@numandev1
Copy link
Contributor

@29er they will not handle this on chrome. you can see #31153. if you wanna run this on chrome then you can use patch https://stackoverflow.com/a/66583605/8079868

@deepakaggarwal7
Copy link

deepakaggarwal7 commented Sep 11, 2021

I'm getting this warning in the default ReactNative demo on running the application in debug mode (No dependencies added).

},
 "dependencies": {
   "react": "17.0.2",
   "react-native": "0.65.1"
 },
 "devDependencies": {
   "@babel/core": "7.15.5",
   "@babel/runtime": "7.15.4",
   "@react-native-community/eslint-config": "2.0.0",
   "babel-jest": "26.6.3",
   "eslint": "7.14.0",
   "jest": "26.6.3",
   "metro-react-native-babel-preset": "0.66.0",
   "react-native-codegen": "^0.0.7",
   "react-test-renderer": "17.0.2"
 },

What's the fix? I don't want to edit the MessageQueue.js to suppress this.

Downgrading to 0.64 doesn't cause this issue.

@betoharres
Copy link

@deepakaggarwal7 I have the same exact issue; I tried multiple solutions but no luck.

@betoharres
Copy link

@deepakaggarwal7 just created a new issue related to this with detailed info, feel free to comment there if you need

@zzeerak
Copy link

zzeerak commented Sep 14, 2021

+1, facing the same. Would be great if someone can help. Unable to debug the app on iOS and android.

@alex-noel
Copy link

experiencing exact same issue. It only happened after transition to react-native 0.65.1
worked totally fine before that.
Tried to apply different solutions, but they all lead to some other issues.

@meshackjr
Copy link

experiencing exact same issue. It only happened after transition to react-native 0.65.1
worked totally fine before that.
Tried to apply different solutions, but they all lead to some other issues.

1+ facing the same issue after just upgrading to 0.65.1

@3KINGZ
Copy link

3KINGZ commented Sep 19, 2021

same issue on 0.65.1

@EHRdev
Copy link

EHRdev commented Sep 21, 2021

Same issue on 0.65.1 please help us

@bhaktitud
Copy link

I'm facing the same issue, it happens when debug mode is active, please help!

`NativeUIManager.getConstantsForViewManager('Text') threw an exception. 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.
CountBadge@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.apolloxendit&modulesOnly=false&runModule=true:80660:35
RCTView
View
RCTView
View
TouchableWithoutFeedback@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.apolloxendit&modulesOnly=false&runModule=true:79148:36
LogBoxButton@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.apolloxendit&modulesOnly=false&runModule=true:80889:33
RCTView
View
LogBoxLogNotification@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.apolloxendit&modulesOnly=false&runModule=true:80587:25
RCTView
View
RCTView
View
_LogBoxNotificationContainer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.apolloxendit&modulesOnly=false&runModule=true:80445:16
LogBoxStateSubscription@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.apolloxendit&modulesOnly=false&runModule=true:22856:38
RCTView
View
AppContainer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.apolloxendit&modulesOnly=false&runModule=true:76863:36
RootComponentWithMeaningfulName@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.apolloxendit&modulesOnly=false&runModule=true:84232:24 index.bundle:20995:28`

@betoharres
Copy link

guys, please refer to this open issue:
#32197

it's better to report this on an open issue

@facebook facebook locked as resolved and limited conversation to collaborators Oct 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging DX Issues concerning how the developer experience can be improved. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

Successfully merging a pull request may close this issue.