Devtools disconnects and crashes as soon as menu is opened

[evelant]

Per title, if I am debugging with react-native-debugger and press ctrl+m to open the dev menu in the Android emulator react-native-debugger instantly loses connection. This makes it impossible to use the inspector to select elements.

C:\Users\imagi\AppDa…st\standalone.js:48 [React DevTools] Only one connection allowed at a time. Closing the previous connection
C:\Users\imagi\AppDa…st\standalone.js:48 [React DevTools] Connected
C:\Users\imagi\AppDa…st\standalone.js:48 [React DevTools] Connection to RN closed
C:\Users\imagi\AppDa…st\standalone.js:48 [React DevTools] Error calling listener 
{event: "operations", payload: Array(6546)}
C:\Users\imagi\AppDa…st\standalone.js:48 Uncaught Error: Cannot add node 1 because a node with that id is already in the Store.
    at C:\Users\imagi\AppDa…st\standalone.js:48
    at t.value (C:\Users\imagi\AppDa…st\standalone.js:48)
    at C:\Users\imagi\AppDa…st\standalone.js:48
    at C:\Users\imagi\AppDa…st\standalone.js:48
    at Array.forEach (<anonymous>)
    at t.e.onmessage (C:\Users\imagi\AppDa…st\standalone.js:48)
    at t.n (C:\Users\imagi\AppDa…st\standalone.js:40)
    at t.emit (events.js:210)
    at t.K (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at t.emit (events.js:210)
    at t.value (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at t.value (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at t.value (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at t.value (C:\Users\imagi\AppDa…ist\standalone.js:8)
    at doWrite (_stream_writable.js:431)
    at writeOrBuffer (_stream_writable.js:415)

React Native Debugger app version: 0.11.0 React Native version: 0.62.1 Platform: Andrew Is real device of platform: No Operating System: Windows 10

[dquessenberry]

I am having the same issue with the iPhone simulator as well. Makes Inspector tool unusable.

React Native Debugger: v0.11.1 React Native: v0.62.2

[SDP190]

Hi @jhen0409 is this the same issue as #504? I have that problem and I wonder if fix will be available for 0.10 too?, since I am using expo which currently supports only ReactNative 61, so not able to use debugger version 0.11.

[jhen0409]

@SDP190 No, this is react-devtools v4 specified issue, so it only for v0.11.

[SDP190]

@jhen0409 thanks for quick response, however I do seem to get that error whenever choosing "Inspect Element" in the developer menu, and then selecting some elements.

[renatobenks]

I'm facing the same, any idea or workaround to solve that @jhen0409?

[renatobenks]

I'm checking it out and around I could investigate so far it does sound to be a problem in react-native actually and how the developer menu has been rendering in the native layer UI which is no more compatible with react-devtools since the latest version, but I'm still wondering over this problem, so I'm sure yet but I'm trying to investigate better and deeper over that to understand what exactly been changed since then to make it stop working.

[evelant]

Anybody have any luck figuring this out? If I run plain react-devtools it works ok. The disconnect only happens with react-native-debugger. I'm guessing it has something to do with the way react-native-debugger embeds react-devtools.

[handipriyono]

i got two error when i am using react native 0.62 and using react native debugger (V. 0.11.3),

1. Unable to find module for EventDispatcher

2. Unable to find module for UIManager

• it happen when try to click -> Cmd+D ( ⌘D ) , refresh in iOS emulator

[renatobenks]

much probably was the metro-react-native-babel-preset upgrade

[anantanandgupta]

Any Luck Guys!!! I am not able to use the toll to it full potential ... the react-native menu is causing the developer tools to get disconnected so i am not able to do layout debugging.

here the the error [React DevTools] Error calling listener in file /Applications/React Native Debugger 2.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js at line 48

"{"event":"operations","payload":[1,1,211,16,67,111,110,116,101,120,116,46,80,114,111,118,105,100,101,114,12,65,112,112,67,111,110,116,97,105,110,101,114,4,86,105,101,119,1,49,16,87,114,97,112,112,101,100,67,111,109,112,111,110,101,110,116,8,72,111,109,101,80,97,103,101,9,76,105,103,104,116,84,101,120,116,4,84,101,120,116,13,84,111,117,99,104,97,98,108,101,84,101,120,116,16,67,111,110,116,101,120,116,46,67,111,110,115,117,109,101,114,16,77,101,100,105,117,109,84,101,120,116,78,117,109,98,101,114,11,82,101,103,117,108,97,114,84,101,120,116,10,77,101,100,105,117,109,84,101,120,116,8,66,111,108,100,84,101,120,116,23,76,111,103,66,111,120,83,116,97,116,101,83,117,98,115,99,114,105,112,116,105,111,110,28,95,76,111,103,66,111,120,78,111,116,105,102,105,99,97,116,105,111,110,67,111,110,116,97,105,110,101,114,1,1,11,1,1,1,2,2,1,0,1,0,1,3,1,2,0,2,0,1,4,2,3,3,1,0,1,5,6,4,3,3,0,1,6,2,5,5,1,0,1,7,6,6,3,3,4,1,8,2,7,7,1,0,1,9,1,8,0,5,0,1,10,1,9,9,6,0,1,11,6,10,10,3,0,1,12,2,11,11,1,0,1,13,1,12,10,7,0,1,14,6,13,13,8,0,1,15,1,14,14,9,0,1,16,2,15,15,10,0,1,17,2,16,16,1,0,1,18,1,12,10,11,0,1,19,6,18,18,8,0,1,20,1,19,19,9,0,1,21,2,20,20,10,0,1,22,2,21,21,1,0,1,23,1,12,10,12,0,1,24,6,23,23,8,0,1,25,1,24,24,9,0,1,26,2,25,25,10,0,1,27,2,26,26,1,0,1,28,1,12,10,13,0,1,29,6,28,28,8,0,1,30,1,29,29,9,0,1,31,2,30,30,10,0,1,32,2,31,31,1,0,1,33,1,12,10,14,0,1,34,6,33,33,8,0,1,35,1,34,34,9,0,1,36,2,35,35,10,0,1,37,2,36,36,1,0,1,38,1,6,3,15,0,1,39,5,38,38,16,0]}"

[resting]

Gettting same errors from a brand new react-native init project.

React DevTools] Error calling listener {event: "operations", payload: Array(1881)}

It breaks the inspector. Any fix for this?

RN 0.63.3 RND 0.11.5

[handipriyono]

Hmm, now i moving away from react-native debugger since it takes time to reload and getting error, and back to the first phone state again, and again, and restart again until it got fixed. Now, i use React-native Flipper. If you guys have project with React Native version 0.62 and higher, you can use this tool. It is easy to use and faster. It does not need you to turn on debugger on emulator, since this flipper already do debug for you. https://fbflipper.com/docs/features/react-native/

[TuurDutoit]

Any update on this? We recently upgrade to React Native v0.63.4 and React Native Debugger v0.11.5. Whenever I open the debug menu (using the "shake" shortcut on the iOS simulator), I see the following messages in the console:

[React DevTools] Only one connection allowed at a time. Closing the previous connection

[React DevTools] Connected

[React DevTools] Connection to RN closed

Bridge was already shutdown.

[React DevTools] Error calling listener {event: "operations", payload: Array(51222)}

/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48 Uncaught Error: Cannot add node 1 because a node with that id is already in the Store.

Sounds like the app is opening a second connection to the debugger for some reason?

[tgearig]

This issue is still happening for me, and keeps me from using this tool.

[janoist1]

I'm getting the same error, very annoying.

[goriverna]

we have the same issue. [React DevTools] Error calling listener {event: "operations", payload: Array(4155)} Any updates ?

[sschottler]

This error appears to go away in [email protected], but I experienced it on 0.64.2. The workaround I found was to open inspector without using the dev menu. Two ways:

1. cmd + i
2. Right-click inside react-native-debugger and select "Toggle Element Inspector"

If you do open dev menu and break connection again, simply reload to reset the state.

You might also need to confirm your app's react-devtools-core version from your node_modules or lock files match the version embedded inside react-native-debugger. I documented all this here:

https://gist.github.com/sschottler/7771dc034d38b89d9d587dc5d358c386

[UsamaIrfan]

I am also getting the same error. Whenever I am trying to open the in-app developer menu and tap debug , the developer console opens in the chrome and the application closes. The app crashed every time I open the app afterward . I have to clear the data to open the app.