[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).