0.72.2 Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome. #38311

edstbbz · 2023-07-12T10:46:09Z

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

start project
connect to chrome debugger

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

The text was updated successfully, but these errors were encountered:

emanuelasistensi · 2023-07-12T15:44:29Z

same problem here

emanuelasistensi · 2023-07-12T18:07:17Z

Same problem here, I leave evidence: project recently created with react-native 0.72.3

AshlandWest · 2023-07-14T19:11:52Z

Replicated on fresh install of RN 72.3, but app seems to run okay after throwing error.

Danushka50 · 2023-07-17T09:14:41Z

Reproduced in RN 72.3.... Any Solution!!!

Also got below error in console

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from /Users/******/******/*******/.: 

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/Users/******/******/*******/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
    at DependencyGraph.resolveDependency (/Users/******/******/*******/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at /Users/******/******/*******/WordsPuzzelGame/node_modules/metro/src/lib/transformHelpers.js:169:21
    at Server._resolveRelativePath (/Users/******/******/*******/node_modules/metro/src/Server.js:1045:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Server._explodedSourceMapForBundleOptions (/Users/******/******/*******/node_modules/metro/src/Server.js:993:35)
    at async Promise.all (index 1)
    at async Server._symbolicate (/Users/******/******/*******/node_modules/metro/src/Server.js:945:26)
    at async Server._processRequest (/Users/******/******/*******/node_modules/metro/src/Server.js:418:7)
 LOG  JavaScript logs will appear in your browser console

kitety · 2023-08-06T04:21:36Z

I also encountered the same problem, but I don't know how to solve it.
"react-native": "0.72.3"

gabrielmenezesnog · 2023-08-08T19:01:39Z

same. I've created a new project with react-native v0.72.3 and still get this problem.

tlt254 · 2023-08-09T03:18:48Z

Me too

nicson0427 · 2023-08-10T10:45:02Z

is this gonna affect prod?
or is just debug will prompt this error and doesnt affect other code

cheikhsidi · 2023-08-12T19:36:07Z

Any update on this issue?

arrywu · 2023-08-18T11:51:35Z

Me too! Could anyone help us?

a7madgamal · 2023-08-21T14:32:22Z

Any feedback about this is appreciated

Dror-Bar · 2023-08-22T13:11:40Z

Is there any way to remove this red warning?

Edit:
Following this answer, I changed callNativeSyncHook in the file node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js like this:

callNativeSyncHook(
    moduleID: number,
    methodID: number,
    params: mixed[],
    onFail: ?(...mixed[]) => void,
    onSucc: ?(...mixed[]) => void,
  ): mixed {
    this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
    if (global.nativeCallSyncHook) return global.nativeCallSyncHook(moduleID, methodID, params);
  }

and saved it with patch-package. This seems to have fixed all error messages.

Jabed-Akhtar · 2023-08-26T10:23:52Z

react version: 18.2.0
react-native version: 0.72.4

chenweigh · 2023-09-01T03:29:54Z

same problem +1

and the solution:

https://stackoverflow.com/questions/61067004/invariant-violation-calling-synchronous-methods-on-native-modules-is-not-suppor

Gagik-arch · 2023-09-22T12:17:04Z

I have the some problem.

iriscoopers · 2023-09-22T13:49:49Z

Ran into it as well, but the docs state remote debugging in Chrome is deprecated since 0.72

Copy pasting from the docs:

If your project still relies on this feature, you can manually enable it manually through the NativeDevSettings.setIsDebuggingRemotely function.

import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';
export default function App() {
  useEffect(() => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  }, []);

  return <MyApp />;
}

Haven't tried it myself but hope this helps

gusilveiramp · 2023-09-24T23:10:33Z

+1

jehillert · 2023-10-03T12:26:49Z

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.

lazaro-contato · 2023-10-16T14:20:06Z

updates?

valery-lavrik · 2023-10-17T07:55:26Z

The documentation says that this is specially done, but you can disable it

NativeDevSettings.setIsDebuggingRemotely(true);

But once you enable this option, the application starts to restart endlessly

Mr-BeanSir · 2023-10-23T05:37:54Z

The same problem occurs

lazaro-contato · 2023-10-23T12:02:27Z

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.

sivamani-edumpus · 2023-10-27T12:12:25Z

Same propelem me

XilinJia · 2023-10-28T14:28:15Z

same problem +1

and the solution:

https://stackoverflow.com/questions/61067004/invariant-violation-calling-synchronous-methods-on-native-modules-is-not-suppor

that doesn't work for me.

ck837 · 2023-11-01T08:41:22Z

Is there any way to remove this red warning?有什么办法可以去掉这个红色警告吗？

Edit: 编辑： Following this answer, I changed callNativeSyncHook in the file node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js like this:根据这个答案，我在文件 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js 中更改了 callNativeSyncHook ，如下所示：
callNativeSyncHook(
    moduleID: number,
    methodID: number,
    params: mixed[],
    onFail: ?(...mixed[]) => void,
    onSucc: ?(...mixed[]) => void,
  ): mixed {
    this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
    if (global.nativeCallSyncHook) return global.nativeCallSyncHook(moduleID, methodID, params);
  }
and saved it with patch-package. This seems to have fixed all error messages.并将其与补丁包一起保存。这似乎已经修复了所有错误消息。

I try this and it succeeds.No error msg! Thanks bro!

wieckowskimateusz · 2023-11-09T10:54:39Z

same in RN 0.72.6

t-fritsch · 2023-11-12T21:22:14Z

@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).
But in the same time chrome debugging is suffering from this bug since months with apparently no intention from the team to work on it.

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 😅

williamgurzoni · 2023-11-29T23:11:29Z

@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). But in the same time chrome debugging is suffering from this bug since months with apparently no intention from the team to work on it.

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.

afcanop · 2024-01-17T15:39:06Z

+1

brownieboy · 2024-02-04T06:29:45Z

Ran into it as well, but the docs state remote debugging in Chrome is deprecated since 0.72

Copy pasting from the docs:

If your project still relies on this feature, you can manually enable it manually through the NativeDevSettings.setIsDebuggingRemotely function.
import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';
export default function App() {
  useEffect(() => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  }, []);

  return <MyApp />;
}
Haven't tried it myself but hope this helps

This crashed my app every time. Presumably, others here had the same experience, hence all the thumbs' down.

brownieboy · 2024-02-04T07:29:13Z

For me, this package worked to re-enable Remote Debugging under RN 0.73.2 https://github.com/gusgard/react-native-devsettings.

It seems to be a wrapper around the NativeDevSettings method, but it doesn't crash my app!

Lakston · 2024-05-22T14:30:24Z

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 ?

MyNetdisk · 2024-05-28T07:33:05Z

same problem +1

and the solution:

https://stackoverflow.com/questions/61067004/invariant-violation-calling-synchronous-methods-on-native-modules-is-not-suppor

that doesn't work for me.

van8tka · 2024-06-27T15:42:10Z

same problem

it's continius on 0.74.2

jehillert · 2024-07-16T21:39:06Z

same problem +1

and the solution:

https://stackoverflow.com/questions/61067004/invariant-violation-calling-synchronous-methods-on-native-modules-is-not-suppor

that doesn't work for me.

For the solution you linked, replace typeof atob !== 'undefined' with !global.nativeCallSyncHook and see if it works.

[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:

Fixing remote-debugging bugs AND
re-enabling react-native-debugger
in bare React Native projects.

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

Add react-native-devsettings and patch-package as dependencies to your project.

yarn add patch-package react-native-devsettings
// OR 
npm install patch-package react-native-devsettings

Add a post-install script to package.json scripts to apply patches after installing dependencies.
json "postinstall": "patch-package"
Use this patch file:
react-native+0.73.6.dev.patch
OR patch yourself with Patching Yourself instructions below.
Add react-native-devsettings to your project:
Add the following import to your App.tsx component (or equivalent)

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
patch yourself with Patching Yourself instructions below.

Add react-native-devsettings to your project:

yarn add react-native-devsettings
// OR 
npm install react-native-devsettings

Add the following import to your App.tsx component (or equivalent)

// App.tsx
import 'react-native-devsettings';

Then when you run your app:

Start react-native-debugger.
In your terminal, press 'd' to show the dev menu in your app.
Select remote debugging at the bottom.
React native debugger should start working.

Patching Yourself

In your editor, open project_root/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js
Replace this code:

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

Run the following command in your root directory from your terminal:

npx patch-package react-native

Rename the file to include '.dev' before 'patch' so that it isn't applied in production. For example, you would rename

react-native+0.73.6.patch

to

react-native+0.73.6.dev.patch

edstbbz added the Needs: Triage 🔍 label Jul 12, 2023

0.72.2 Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome. #38311

0.72.2 Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome. #38311

Comments

edstbbz commented Jul 12, 2023

Description

React Native Version

Output of npx react-native info

Steps to reproduce

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

emanuelasistensi commented Jul 12, 2023

emanuelasistensi commented Jul 12, 2023

AshlandWest commented Jul 14, 2023 • edited Loading

Danushka50 commented Jul 17, 2023 • edited Loading

kitety commented Aug 6, 2023

gabrielmenezesnog commented Aug 8, 2023

tlt254 commented Aug 9, 2023

nicson0427 commented Aug 10, 2023

cheikhsidi commented Aug 12, 2023

arrywu commented Aug 18, 2023

a7madgamal commented Aug 21, 2023

Dror-Bar commented Aug 22, 2023 • edited Loading

Jabed-Akhtar commented Aug 26, 2023

chenweigh commented Sep 1, 2023

Gagik-arch commented Sep 22, 2023 • edited Loading

iriscoopers commented Sep 22, 2023 • edited Loading

gusilveiramp commented Sep 24, 2023

jehillert commented Oct 3, 2023

lazaro-contato commented Oct 16, 2023

valery-lavrik commented Oct 17, 2023

Mr-BeanSir commented Oct 23, 2023

lazaro-contato commented Oct 23, 2023

sivamani-edumpus commented Oct 27, 2023

XilinJia commented Oct 28, 2023

ck837 commented Nov 1, 2023

wieckowskimateusz commented Nov 9, 2023

t-fritsch commented Nov 12, 2023 • edited Loading

williamgurzoni commented Nov 29, 2023

afcanop commented Jan 17, 2024

brownieboy commented Feb 4, 2024

brownieboy commented Feb 4, 2024 • edited Loading

Lakston commented May 22, 2024

MyNetdisk commented May 28, 2024

van8tka commented Jun 27, 2024

jehillert commented Jul 16, 2024 • edited Loading

Fix Bug & Enable RND-Debugger

Patching Yourself

Output of `npx react-native info`

AshlandWest commented Jul 14, 2023 •

edited

Loading

Danushka50 commented Jul 17, 2023 •

edited

Loading

Dror-Bar commented Aug 22, 2023 •

edited

Loading

Gagik-arch commented Sep 22, 2023 •

edited

Loading

iriscoopers commented Sep 22, 2023 •

edited

Loading

t-fritsch commented Nov 12, 2023 •

edited

Loading

brownieboy commented Feb 4, 2024 •

edited

Loading

jehillert commented Jul 16, 2024 •

edited

Loading