react: [DevTools Bug] Cannot add node "1" because a node with that id is already in the Store.

Repro steps

“react”: “17.0.2”, “react-native”: “0.66.3”, “react-devtools”: “^4.22.0”, “@react-navigation/devtools”: “^6.0.5”, “@react-navigation/bottom-tabs”: “^6.1.0”, “@react-navigation/core”: “^6.1.1”, “@react-navigation/elements”: “^1.3.0”, “@react-navigation/native”: “^6.0.7”, “@react-navigation/native-stack”: “^6.3.0”, “@react-navigation/routers”: “^6.1.0”, “@react-navigation/stack”: “^6.1.0”,

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-core

DevTools version (automated)

4.14.0-d0ec283819

Error message (automated)

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

Error call stack (automated)

at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:140545
    at c.emit (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:89515)
    at /Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:90986
    at /Applications/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 (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:48:347771)
    at S.n (/Applications/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 (/Applications/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 (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:15409)
    at e.exports.getData (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:14651)
    at e.exports.startLoop (/Applications/React Native Debugger.app/Contents/Resources/app.asar/node_modules/react-devtools-core/dist/standalone.js:8:12066)
    at e.exports._write (/Applications/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)

Error component stack (automated)

No response

GitHub query string (automated)

https://api.github.com/search/issues?q=Cannot add node  because a node with that id is already in the Store. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 16
Comments: 32 (3 by maintainers)

Most upvoted comments

OK, I have fixed this for myself by adding this into our package.json:

"resolutions": { "react-devtools-core": "4.14.0" }, I found the solution in this thread: https://github.com/jhen0409/react-native-debugger/issues/620

+53

MalinnaLeach on Feb 25, 2022

I see this issue is recent. Idk what the outcome of this will be, but I’ve avoid getting this error. check if you are mapping an array making use of its index param to set it as key prop.

ar.map((obj, index) => ... )

if so, try to avoid it. dont use index as key. give your object an id or other kind of unique identifier as key prop.

jonoise on Feb 16, 2022

Guessing a lot of folks are commenting without a repro because the debugger is linking to this issue with instructions to add a comment in large bold font, easy to miss the rest about providing a repro case and it’s a confusing bug.

For React Native npm users that can’t use the resolutions workaround mentioned elsewhere (only works for yarn), try installing the devtools and core direct in your project (not global):

npm install --save-dev react-devtools@4.14.0 react-devtools-core@4.14.0

It’s possible you may only need the core package, but installing both didn’t hurt for me.

erquhart on Apr 18, 2022

Now that I see it, between 4.25.0 and 4.27.1, there was an update to the V3 manifest:

https://github.com/facebook/react/commit/6dbccb92493c3a4fea14b6832ceb4ac42e6330c1 (PR https://github.com/facebook/react/pull/25145)

That could explain the issue.

For now I am using unpacked 4.25.0, from crx4chrome.

kamranayub on Jan 13, 2023

This is new as of either 4.27.0 or 4.27.1 as I haven’t changed any code in the repo since Nov 18 when I was using 4.26.1 to record a course. You can see a snapshot preview site here where there are issues.

Specifically, this issue seems to be random – I only saw it once, but I think it’s due to the devtools not loading immediately and timing out.

To reproduce:

Load the page
Hit F12 to open Chrome devtools
Observe if React extension icon is still greyed out
Click React extension icon
Observe how Components/Profiler tabs show up
Click Components tab
Observe it keeps spinning on loading
Click the React extension icon again
Now the tree loads

Video

I recorded a clip because it’s BONKERS to try and describe 😄

https://user-images.githubusercontent.com/563819/207508254-6bd10f70-2016-4e8a-b3d7-35140f6d7004.mp4

Screenshots

DevTools greyed out initially (not always the case but happens during the video)

And when it does work, I started seeing another issue while debugging the app (couldn’t repro in video):

Workaround

I noticed if I click the React extension icon a few times with the developer tools open, it loads much faster and doesn’t time out 🤔

I am using CRA with Chrome Devtools, no RN at all.

Chrome 108.0.5359.96
DevTools 4.27.1-47f63dc54

As for the root cause, I don’t know exactly but if I had to bet 💰 then my bet is on this (big PR, new feature, device storage related, possible async/timeout issues): https://github.com/facebook/react/pull/25452

edit: I looked around at the commits/PRs and did some limited testing but I’m not so sure now, maybe it was introduced elsewhere.

Hope that helps @gaearon!

I can confirm on my separate Chrome profile using 4.25.0 everything is working, so I will plan to revert to that in the meantime.

kamranayub on Dec 14, 2022

i am facing this issue please guide me whats a problem in my devtools…

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

The error was thrown at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26229:41 at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24415:22) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24581:14 at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:54033:39)

muhammadRooman on Feb 4, 2022