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

[Bodyhealer]

Website or app

https://zhivika.ru/product/26406103_plastyr_perc_bperf_10smh18sm_n

Repro steps

1. Load page.
2. Open react components.
3. Click button "Смотреть все аптеки" for unfold all list.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.13.5-0ae5290b54

Error message (automated)

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

Error call stack (automated)

No response

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

[bvaughn]

Hi @Bodyhealer. I'm no table to reproduce the error following the steps you've described.

bug-21636-repro-Kapture.2021-06-07.at.08.56.19.mp4

Any suggestions?

[rdcavanha]

I've got this error today as well on Firefox 89.
Adding to OP's report, this happens when refreshing the page while the dev console is open with the Components tab shown (see screenshot). Not sure if it happens in other scenarios too.

P.S.: Clicking on Dismiss gets rid of the error and seems to show the components correctly again, but it shows up again if the page is refreshed.

[bvaughn]

@rdcavanha You're seeing this bug using OP's codebase? Or a different app?

[rdcavanha]

@rdcavanha You're seeing this bug using OP's codebase? Or a different app?

Completely different app.

[bvaughn]

@rdcavanha Could you share your code then? I'm still looking for a way to repro this issue.

[rdcavanha]

@bvaughn Sorry, I can't share the code as it is a private repo.

However, I've noticed that after I refreshed my Firefox profile the issue seems to be gone. I've tried using the React extension on the same app as before and was unable to reproduce the bug again.

This leads me to believe that it's probably some sort of conflict with another extension (just a guess). Unfortunately I can't say which one exactly as I no longer have all the extensions installed due to the profile refresh. The fact that this has very low occurrence seems to support this idea of extension conflict as well.

[bvaughn]

Thanks for the extra info.

[Romej]

[Win10 64-bit] [Firefox 89.0]
Got the issue today, you may be able to replicate it with the following steps :

1. If the React devtools extension is installed, uninstall it
2. Go on a web page that uses React and open the Firefox devtools
3. In a new/different tab, install the React devtools extension
4. Keep the Firefox devtools opened and refresh your page (CTRL + F5)
5. Go to the Components tab

[dgattey]

macOS 11.3.1 Macbook Pro M1, Firefox 89.0.1.

1. I installed React devtools for the first time ever on Firefox on this computer
2. Navigated to my localhost site that was already running before extension install
3. Refreshed the page with cmd-R with DevTools open and Caching disabled in Firefox DevTools settings
4. Observe Uncaught Error: Cannot add node "1" because a node with that id is already in the Store. on every single page reload. Also occurs on every single page navigation, but I get Uncaught Error: Cannot remove node "310" because no matching node was found in the Store. instead, where the node id changes every time. With the first error, I get node "1" every time.

Source is private, sorry

[bvaughn]

Unfortunately errors after the extension is first installed or removed might be something that we can't do much about. (Sometimes a full reload of the tab and/or the devtools console is required before an extension will work correctly.) Maybe there's a way for React/DevTools to more gracefully handle this edge case, but it's not a super high priority given how uncommon it is and how easy it is to fix (reload once).

[dgattey]

Reloading the whole browser did work, but tab / console refresh didn't work @bvaughn. Thanks!

[sj-rai]

I faced this issue when I had two devtools frontend open, one in the browser extension and a devtools standalone, closing one stopped giving this error. Maybe that's what is causing this.

[ghost]

The image file is missing

[lunaruan]

I'm able to periodically reproduce this bug, so I can take a look next time it comes up!

[perqa]

Just reproduced in Chrome using standalone react-devtools simultaneously with the browser extension. Even though the steps to reproduce might not be the same as the original reporter, as well as being misuse of the extension, I hope they might giva a clue to the root cause.

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

Prerequisites:

1. Installed standalone React devtools (Electron app)
2. React app prepared for profiling with standalone React devtools (Electron app)

Steps to reproduce:

1. Activate React devtools profiler in Chrome
2. Reload page in Chrome
3. Start standalone React devtools (Electron app)
4. Reload page in Chrome and see error message

The error was thrown at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25113:41
    at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23328:22)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:23488:12
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:51486:39)

---

Edit:
Just got the same error message in standalone react-devtools after reloading the page a few times while standalone react-devtools were running.

[millikr2]

@rdcavanha I'm using the Chrome extension and got the same error. It went away when I changed one of my classNames, I'm guessing one of my extensions was using the same className.
Edit:
Still getting periodically, even when not changing styling.
I'm also working directly in the index.js file without an App.js file, which has given other issues before.

[noahehall]

getting the same error with react18 alpha

reproducable commit

steps to reproduce

• pulldown branch (see link above)
• $ cd packages/tests
• $ pnpm install
• $ pnpm start:react

open firefox developer edition

[bvaughn]

@noahehall Followed the steps above but pnpm install fails with:

jsync: command not found

I don't know what jsync is but I tried installing it via the instructions here and I still get the error.

Looks like the error is coming from packages/tools/jsync

[noahehall]

@bvaughn sorry about that - jsync is internal to the repo (/root/packages/tools/jsync)

give me a second to do a fresh clone and determine exactly what needs to be done to run the app

@bvaughn here are the exact steps taken on a fresh clone, please ignore the previous directions

then open localhost:8080

[noahehall]

@bvaughn hah!

Upraded node to 16.9.1 and recieved the same error as you.

the the real issue (with jsync) was a preinstall script inside jsync/package.json (ment to automatically sync root pkgjsons to child pkjsons via npm link which creates the jsync bin cmd)

This has been fixed and you should be able to follow the steps and reproduce (react-devtools issue) without error

sorry but nodeproto, by definition, is filled with prototypes and things (thus relying on tools like react-devtools is paramount)

thx for your help on this issue!

nh

[bvaughn]

@noahehall Am I checking the update-wtf branch for the repro now? HEAD of that branch still fails for me:

$ pnpm install
...
../.. postinstall$ cp node_modules/@nodeproto/configproto/.flowconfig .
│ cp: node_modules/@nodeproto/configproto/.flowconfig: No such file or directory
└─ Failed in 39ms
 ELIFECYCLE  Command failed with exit code 1.

$ node -v
v14.17.0

[noahehall]

the branch extract-nodeproto-utica

[noahehall]

there's a pkjson script that copies the flowconfig , you should comment it

[bvaughn]

the branch extract-nodeproto-utica

There is no extract-nodeproto-utica branch. Please double check your repro and get back to me, @noahehall. Maybe you forgot to push?

there's a pkjson script that copies the flowconfig , you should comment it

Okay. I'll try this.

[noahehall]

@bvaughn your patience is emmy-award winning.

I was able to resolve this issue internally (thus for other users facing this issue, its likely a configuration problem)

so what exactly was the issue? shit if i know... but the develop branch works both:

• running react@alpha + reactdevtools directly
• running react@alpha + reactdevtools behind an haproxy gateway

working on the problem you were facing running my nodeproto framework, I ended up

• enabling the new node corepack API
• removing NVM and using pnpm env to install node
• deleting the fkn pnpm cache and starting fresh (this is where the discrepenancy between my env and yours was borne)
• writing a bunch of tests... which led to some tweaking of my webpack, swc, babel, and esbuild configurations

[bvaughn]

Thank you for the update, @noahehall 👍🏼 I'm glad you were able to get the issue resolved on your end.

We'll keep this issue open for others in case more repros pop up in the future 😄

[virajtk]

Website or app

https://zhivika.ru/product/26406103_plastyr_perc_bperf_10smh18sm_n

Repro steps

1. Load page.
2. Open react components.
3. Click button "Смотреть все аптеки" for unfold all list.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.13.5-0ae5290b54

Error message (automated)

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

Error call stack (automated)

No response

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

I got the same issue, then I relaized I have the same extention dulicated, I used Edge and I installed both React Dev Tool extensions for both chrom and edge. After I disabled / remove the Chrome extention ( because I used Edge browser ). The issue was gone.

[bvaughn]

Thank you for the extra information @virajtk

[macbury]

Same problem here :(

[jstejada]

Merging #22570 into this issue, which seems to be another instance of the same problem.

[idelice]

Just produced today.

[bvaughn]

@Delice0 I'm sorry to hear you're seeing this.

Unfortunately without instructions on how to repro, this isn't particularly useful for tracking down and fixing the issue.

[KonstantinZhukovskij]

The same issue with the last RN and node 16.13.1

[bvaughn]

Please take a moment to read other comments above (like #21636 (comment)) before adding an addition one, folks.

@KonstantinZhukovskij Without any repro instructions, "same issue" doesn't really give us any way to help.

[AllanChain]

With React Native bug reproduction: https://github.com/AllanChain/rn-dev-bug

Steps:

• Connect phone and computer to the same LAN
• yarn install
• yarn start
• Launch globally installed react-devtools standalone (v4.22.1)
• Open project in Expo Go
• Refresh by pressing r in terminal

"Cannot add node" error will appear, roughly once in three refreshes.

Edit: I figured out that it's the incorrect version of react-devtools-core installed that causes the problem. Installing the latest react-devtools-core fixed the issue for me.

[Bodyhealer]

Maybe this bug gone. For now I'm using v4.22.0-0229baee2

[bvaughn]

Here is another repro: #23035 (comment)

Thanks @junkboy0315!

---

I realized that upgrading react-devtools-core >= 4.22.0 breaks react-native-debugger.

Minimal reproductive sample (zip)

This sample works fine with debugger at first. (it uses react-devtools-core v4.21.0)
But it will break if you follow the steps below.

• remove react-devtools-core in yarn.lock. <- v4.21.0 will be removed
• run yarn add react-devtools-core. <- v4.22.1 will be installed
• run expo, and then, you can see that devtools is broken.

[bvaughn]

Possible fixed by #23156.

[Bablu-singh]

I am not able to use the elements tab in React Native Devtools

[bvaughn]

Closing this issue since we're releasing a new version today (with the fix from #23156).

---

Released on Jan 24 as version 4.23.0:
https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#4230-january-24-2022

Give it a couple of days to propagate to all of the browsers. (Chrome usually takes the longest.)

[troZee]

Here is another repro: #23035 (comment)

Thanks @junkboy0315!

I realized that upgrading react-devtools-core >= 4.22.0 breaks react-native-debugger.

Minimal reproductive sample (zip)

This sample works fine with debugger at first. (it uses react-devtools-core v4.21.0) But it will break if you follow the steps below.

• remove react-devtools-core in yarn.lock. <- v4.21.0 will be removed
• run yarn add react-devtools-core. <- v4.22.1 will be installed
• run expo, and then, you can see that devtools is broken.

Thank you @bvaughn. Based on working example I was able to fix DevTool in Expo 44. I was following this article but it did not work out on my end.