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

spolesciuc · 2022-02-02T14:43:14Z

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

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

lunaruan · 2022-02-02T16:45:53Z

Hey! Thanks for reporting this issue, and I'm really sorry you encountered it. However, without a repro case we're not able to address this. Could you create a codesandbox or a create-react-app repro case for us so we can debug and fix your issue? Thanks!

prabhg · 2022-02-03T07:05:54Z

I believe this is the same issue as reported in RN Debugger GH: jhen0409/react-native-debugger#668

muhammadRooman · 2022-02-04T21:23:22Z

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)

afilp · 2022-02-09T14:51:53Z

I have the same issue, any ideas what should we do? Thanks a lot.

vijaynyaya · 2022-02-10T11:21:27Z

le même problème.
Uncaught Error: Cannot add node "1931" because a node with that id is already in the Store.

x1unix · 2022-02-12T10:13:31Z

I have the same issue in my project

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

rudriken · 2022-02-14T14:38:59Z

I'm also having the same problem.

bwhitt · 2022-02-14T18:30:35Z

Same issue for me - RN v0.64.3 RND v0.12.1

jonoise · 2022-02-16T07:54:13Z

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.

MalinnaLeach · 2022-02-25T16:11:39Z

I am facing this same issue, I have upgraded both react-devtools and react-devtools-core to 4.23.0, and we are not using index as a key anywhere in our codebase.

MalinnaLeach · 2022-02-25T16:33:40Z

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: jhen0409/react-native-debugger#620

oldskoolfan · 2022-02-25T20:30:32Z

thank you @MalinnaLeach you helped me as well

NaingLinnKyaw · 2022-03-20T15:21:02Z

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
```help

rgomezp · 2022-03-31T00:09:30Z

Also facing this issue

gaearon · 2022-03-31T00:20:03Z

We can't help without a reproducing case.

Please only add a comment if you can provide one. Thanks!

jlordi70 · 2022-04-13T01:48:16Z

I am also having this issue. Steps I used to reproduce:

npx react-native init ReactNativeDebuggerTest
npm i react-native-port-patcher
Add following line to package.json files under scripts: "postinstall": "react-native-port-patcher --new-port 8088",
npx react-native run-android --verbose --port 8088
Change Debug server host & port for device to: localhost:8088
Turn on Debug

Here is my repository: https://github.com/jlordi70/ReactNativeDebuggerIssue.git
Other than the port patcher, I have not changed any code.

Please let me know if you need any other information.

Thank You In Advance!

adipascu · 2022-04-13T23:53:48Z

This is happening to me while having import 'react-devtools' in the app and running it in Google Chrome while it has the React Dev Tools extension installed.

Seems like having two devtool instances attached to the same app is also causing this bug.

lunaruan · 2022-04-14T17:49:37Z

For those of you on React Native with this issue, this could be because your DevTools backend in React Native (react-devtools-core) is incompatible with the React DevTools front end. Could you upgrade (or downgrade) the two so that the versions match and see if you can reproduce this issue?

We have a PR out that warns if the DevTools backend and front end versions mismatch, but it's only available as of v4.24.3 so you might not see if it you are on older versions.

zhangsenhua · 2022-04-17T01:59:37Z

I'm also having the same problem.

erquhart · 2022-04-18T01:22:12Z

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.

jlordi70 · 2022-04-18T19:46:26Z

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.

I tried that and it still did not work.

I provided a repo above: https://github.com/jlordi70/ReactNativeDebuggerIssue.git

Package,json file
...
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0",
"react-devtools": "^4.14.0",
"react-devtools-core": "^4.14.0",
"react-native-port-patcher": "^1.0.4",
"react-test-renderer": "17.0.2"
},

jlordi70 · 2022-04-18T20:01:10Z

@lunaruan
There is a repo that I was getting the issue on. I am hoping you can look at this. Thanks In Advance.

https://github.com/jlordi70/ReactNativeDebuggerIssue.git

akhilbellam95 · 2022-04-20T16:38:37Z

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.

I am also facing the same issue
Tried the above solution

lunaruan · 2022-05-04T20:59:12Z

@jlordi70 I tried to reproduce the issue with your repro case but I couldn't. Could you manually upgrade both your react-devtools package as well as the react-devtools-core dependency (in node_module, which the react-native package needs) to 4.24.0 and see if this fixes your issue?

pavelgronsky · 2022-05-11T09:27:29Z

Hey everyone!!!

This is my solution

dmitryou · 2022-11-03T05:06:36Z

In my case reinstalling of react-native-debuger to newer version solved the issue

Homebrew 2.6.0 and higher
brew reinstall --cask react-native-debugger

If you face permission issue, just remove debugger manually and reinstall

kamranayub · 2022-12-14T04:48:47Z

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 😄

Bonus.-.Debugging.the.DevTools.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): #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 · 2023-01-13T18:43:51Z

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

6dbccb9 (PR #25145)

That could explain the issue.

For now I am using unpacked 4.25.0, from crx4chrome.

MarthL · 2023-02-07T13:58:40Z

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: jhen0409/react-native-debugger#620

In my case this solution has worked for me

tayrotayro · 2023-02-28T18:52:45Z

I got this error but I turned off the extension, closed the browser, reopened the browser, turned the extension back on, and then it worked!

Connor-Bernard · 2023-03-02T20:25:27Z

I was able to replicate this error iff I opened my developer menu in Chrome on the test site.

Closing the developer panel and refreshing got rid of the issue

kamranayub · 2023-05-17T02:17:29Z

Still happening with 4.27.7. Besides the not showing right away (opening/closing the dev tools fixes this), it was working for about an hour and a half. Came back tonight (6 hours later) and now it won't work, it just times out on every single inspected component. I didn't do anything between then and now. So it's weird that it starts to happen over time suggesting some kind of leak.

PS. I'm not alone it seems

This might just warrant a new issue to decouple it from React Native since these are from the Chrome web store review section.

spolesciuc added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels Feb 2, 2022

lunaruan added Resolution: Needs More Information and removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug labels Feb 2, 2022

lunaruan assigned lunaruan and spolesciuc and unassigned lunaruan Feb 2, 2022

MalinnaLeach mentioned this issue Feb 25, 2022

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

Closed

JavaScriptErika mentioned this issue Mar 2, 2022

Cannot add node "1" because a node with that id is already in the Store. jhen0409/react-native-debugger#668

Open

kamranayub mentioned this issue May 17, 2023

[DevTools Bug] Cannot add node "621" because a node with that id is already in the Store. #26340

Open

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

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

Comments

spolesciuc commented Feb 2, 2022 • edited Loading

Repro steps

How often does this bug happen?

DevTools package (automated)

DevTools version (automated)

Error message (automated)

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

lunaruan commented Feb 2, 2022

prabhg commented Feb 3, 2022

muhammadRooman commented Feb 4, 2022

afilp commented Feb 9, 2022

vijaynyaya commented Feb 10, 2022

x1unix commented Feb 12, 2022

rudriken commented Feb 14, 2022

bwhitt commented Feb 14, 2022

jonoise commented Feb 16, 2022

MalinnaLeach commented Feb 25, 2022

MalinnaLeach commented Feb 25, 2022

oldskoolfan commented Feb 25, 2022

NaingLinnKyaw commented Mar 20, 2022

Repro steps

How often does this bug happen?

DevTools package (automated)

DevTools version (automated)

Error message (automated)

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

rgomezp commented Mar 31, 2022

gaearon commented Mar 31, 2022

jlordi70 commented Apr 13, 2022

adipascu commented Apr 13, 2022

lunaruan commented Apr 14, 2022

zhangsenhua commented Apr 17, 2022

erquhart commented Apr 18, 2022

jlordi70 commented Apr 18, 2022

jlordi70 commented Apr 18, 2022

akhilbellam95 commented Apr 20, 2022 • edited Loading

lunaruan commented May 4, 2022 • edited Loading

pavelgronsky commented May 11, 2022

dmitryou commented Nov 3, 2022 • edited Loading

kamranayub commented Dec 14, 2022 • edited Loading

Video

Screenshots

Workaround

kamranayub commented Jan 13, 2023

MarthL commented Feb 7, 2023

tayrotayro commented Feb 28, 2023

Connor-Bernard commented Mar 2, 2023

kamranayub commented May 17, 2023 • edited Loading

spolesciuc commented Feb 2, 2022 •

edited

Loading

akhilbellam95 commented Apr 20, 2022 •

edited

Loading

lunaruan commented May 4, 2022 •

edited

Loading

dmitryou commented Nov 3, 2022 •

edited

Loading

kamranayub commented Dec 14, 2022 •

edited

Loading

kamranayub commented May 17, 2023 •

edited

Loading