-
Notifications
You must be signed in to change notification settings - Fork 24.3k
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
0.72.2 Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome. #38311
Comments
same problem here |
Replicated on fresh install of RN 72.3, but app seems to run okay after throwing error. |
I also encountered the same problem, but I don't know how to solve it. |
same. I've created a new project with react-native v0.72.3 and still get this problem. |
Me too |
is this gonna affect prod? |
Any update on this issue? |
Me too! Could anyone help us? |
Any feedback about this is appreciated |
Is there any way to remove this red warning? Edit:
and saved it with patch-package. This seems to have fixed all error messages. |
same problem +1 and the solution: |
I have the some problem. |
Ran into it as well, but the docs state remote debugging in Chrome is deprecated since 0.72 Copy pasting from the docs:
Haven't tried it myself but hope this helps |
+1 |
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. |
updates? |
The documentation says that this is specially done, but you can disable it
But once you enable this option, the application starts to restart endlessly |
The same problem occurs |
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. |
that doesn't work for me. |
I try this and it succeeds.No error msg! Thanks bro! |
same in RN 0.72.6 |
@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). 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. |
+1 |
This crashed my app every time. Presumably, others here had the same experience, hence all the thumbs' down. |
For me, this package worked to re-enable Remote Debugging under RN 0.73.2 https:/gusgard/react-native-devsettings. It seems to be a wrapper around the |
still facing this issue in RN 0.73.8, what are we supposed to do to debug ? Flipper is dead, we cant use react native debugger because of this, so what now ? |
same problem +1 and the solution: that doesn't work for me. |
same problem it's continius on 0.74.2 |
For the solution you linked, replace [EDIT: I am just going to provide a full set of instructions everywhere I see people talking about this bug. If these instructions don't do it for you, let me know and we can try to figure out what's not working. The following solution is for:
If you have a different version of react native, either check with patch-package documentation to understand how to change the file, or just follow the patching instructions to generate your own patch. If these instructions do not work, reply with what did not work, and maybe I can help figure it out and/or adjust these instructions. Fix Bug & Enable RND-Debugger
yarn add patch-package react-native-devsettings
// OR
npm install patch-package react-native-devsettings
diff --git a/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js b/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js
index 07481e5..8c783b3 100644
--- a/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js
+++ b/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js
@@ -167,21 +167,15 @@ class MessageQueue {
callNativeSyncHook(
moduleID: number,
methodID: number,
- params: mixed[],
- onFail: ?(...mixed[]) => void,
- onSucc: ?(...mixed[]) => void,
- ): mixed {
- 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.',
- );
- }
+ params: any[],
+ onFail: ?Function,
+ onSucc: ?Function,
+ ): any {
this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
- return global.nativeCallSyncHook(moduleID, methodID, params);
+ if(global.nativeCallSyncHook)
+ {
+ return global.nativeCallSyncHook(moduleID, methodID, params);
+ }
}
processCallbacks( OR
yarn add react-native-devsettings
// OR
npm install react-native-devsettings
// App.tsx
import 'react-native-devsettings'; Then when you run your app:
Patching Yourself
callNativeSyncHook(
moduleID: number,
methodID: number,
params: mixed[],
onFail: ?(...mixed[]) => void,
onSucc: ?(...mixed[]) => void,
): mixed {
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.',
);
}
this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
return global.nativeCallSyncHook(moduleID, methodID, params);
} with this code: callNativeSyncHook(
moduleID: number,
methodID: number,
params: any[],
onFail: ?Function,
onSucc: ?Function,
): any {
this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
if(global.nativeCallSyncHook)
{
return global.nativeCallSyncHook(moduleID, methodID, params);
}
}
npx patch-package react-native
to
|
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
Snack, code example, screenshot, or link to a repository
The text was updated successfully, but these errors were encountered: