Cannot add node "1" because a node with that id is already in the Store.

[friederbluemle]

React Native Debugger app version: 0.12.1 React Native version: 0.66.4 Platform: Android + iOS Is real device of platform: Android real device, iOS simulator Operating System: macOS

Steps to reproduce:

1. Create new React Native project npx react-native init rnapp
2. Start React Native Debugger
3. Enable debugging in app
4. Observe crash

Uncaught Error: Cannot add node "1" because a node with that id is already in the Store.

The error was thrown at /path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:140545
at c.emit (/path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:89515)
at /path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:90986
at /path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:347787
at Array.forEach (<anonymous>)
at S.Gc.e.onmessage (/path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:347771)
at S.n (/path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:40:3009)
at S.emit (events.js:315:20)
at e.exports.P (/path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:9318)
at e.exports.emit (events.js:315:20)
at e.exports.dataMessage (/path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:15409)
at e.exports.getData (/path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:14651)
at e.exports.startLoop (/path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:12066)
at e.exports._write (/path/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:11421)
at doWrite (_stream_writable.js:403:12)
at writeOrBuffer (_stream_writable.js:387:5)

Related issues in https://github.com/facebook/react/:

• https://github.com/facebook/react/issues/22963
• https://github.com/facebook/react/issues/21636

[TamaraMalakhova]

The same problem

[champagneht]

The same problem

[nanxiaobei]

Same issue. version v0.12.1.

[anhquan291]

Facing same error. Any updates please?

[Slyness98]

In the react-devtools package, I got this all to work by upgrading both react-devtools and react-devtools-core to v4.22.1. If this repo could bump both versions up to put these packages back in sync that should hopefully solve the problem. Until then, I don't think there's a way to use this tool. I have the same error every time I launch, forcing me to go back to just plain react-devtools / browser-based react native debugger which launches with expo. It's a real shame; I love how all of that is integrated in one place with RN-debugger.

For now, I just upgraded react-devtools from npm and customized the port it listens to via react-devtools-core, as documented here. Component and Profiler tabs, plus some console.logs is better than nothing I suppose!

[AdhamMoussa]

same issue v0.12.1

[Alaaa-Drebate]

same issue here too

[dkang23]

same issue

[dkang23]

In the react-devtools package, I got this all to work by upgrading both react-devtools and react-devtools-core to v4.22.1. If this repo could bump both versions up to put these packages back in sync that should hopefully solve the problem. Until then, I don't think there's a way to use this tool. I have the same error every time I launch, forcing me to go back to just plain react-devtools / browser-based react native debugger which launches with expo. It's a real shame; I love how all of that is integrated in one place with RN-debugger.

For now, I just upgraded react-devtools from npm and customized the port it listens to via react-devtools-core, as documented here. Component and Profiler tabs, plus some console.logs is better than nothing I suppose!

I "npm install"ed (not globally) 'react-devtools' and 'react-devtools-core' and set them to the same version

"react-devtools": "~4.14.0", "react-devtools-core": "~4.14.0", and re-installed everything by deleting package-lock.json and node_modules

then ran npm install and it worked

I think the problem was those packages not being the same version

[nancologist]

On Mac I could not even install react-devtools globally, because of electron. But it finally worked with following options:

sudo npm i -g react-devtools --unsafe-perm=true --allow-root=true

so as a work-around you can run react-devtools in Terminal and connect it to your virtual device

[farukomer58]

Installing "'react-devtools" and "react-devtools-core" globally solved this issue by me. so just running:

1. npm install -g react-devtools
2. npm install -g react-devtools-core

[CaptainHaider]

facing same issue

[Alex1899]

same issue

[JavaScriptErika]

Facing the same issue too on pc This solution worked for me! https://github.com/facebook/react/issues/23226#issuecomment-1051006915

[DreamEmulator]

+1

[musikobios]

Same issue on:

• Windows 10
• ReactNative 0.68.0
• ReactNative Debugger 0.12.1

Problem

The problem occurs due to react-devtools-core version mismatch. React Native debugger uses "react-devtools-core": "4.14.0" (as of v0.12.0 changelog) but npx react-native init comes with the @latest version.

Remarks

When starting a project with npx react-native init, it comes with react-devtools-core installed, not react-devtools. Identify this with npm list foreach of these packages (locally in your project, NOT global):

So when it comes to react-devtools-core dependency, notice that it is a nested dependency of react-native.

As stated in https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides, you are able to select different version for dependencies of your dependencies with the overrides property in package.json. So the first thing that came in my mind, was adding the package version as an overrides to package.json and running a clean npm install:

"overrides": {
    "react-devtools-core": "4.14.0"
}

This will do the trick, but to be more precise react-devtools-core is a dependency of react-native, so it's a dependency of your dependency as mentioned above.

Solution

1. Run npx react-native init YourProjectName (if you haven't already).
2. Delete node_modules directory (and package-lock.json file if any).
3. Be sure that you don't have react-devtools-core anywhere in your dependencies & add these lines to your package.json.

   "overrides": {
   "react-native": {
       "react-devtools-core": "4.14.0"
   }
   }

   Exact version depends on the ReactNativeDebugger's current react-devtools-core version (for 0.12.0-0.12.1 is 4.14.0) Notice that react-devtools-core is added as a dependency of react-native.

4. Run npm install
5. Uninstall any previous installs of your app, from you device or emulator
6. Now open React Native Debugger
7. Run npm run android
8. Selecting Debug from the developer menu, should now debug your app in ReactNativeDebugger

IMPORTANT NOTE: Not tested in macOS.

[ThomasStubbe]

Or in case you use yarn:

  "resolutions": {
    "react-devtools-core": "4.14.0"
  },

[dudeinthemirror]

on Mac OS (M1) the following fixed it for me:

yarn global add react-devtools react-devtools-core

and, in the app's package.json:

"resolutions": {
    "react-devtools-core": "4.14.0"
  },

[pavelgronsky]

Hey everyone!!!

This is my solution

[samvoults]

"overrides" only works on npm version 8.3.0 and above. To update npm, run : npm install -g npm

[rossjackson]

For those that don't want to use yarn https://github.com/jhen0409/react-native-debugger/issues/620#issuecomment-1022393221

[Lunotte]

With React Native Debugger version 0.13.0 and a React Native project in 0.69.4, there is no need to add "overrides" or "resolution" for react-devtools-core in the package.json