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

Bodyhealer · 2021-06-07T06:52:01Z

Website or app

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

Repro steps

Load page.
Open react components.
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

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

bvaughn · 2021-06-07T12:57:06Z

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 · 2021-06-13T04:13:47Z

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 · 2021-06-14T16:44:12Z

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

rdcavanha · 2021-06-14T23:20:38Z

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

Completely different app.

bvaughn · 2021-06-15T14:33:15Z

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

rdcavanha · 2021-06-16T00:08:50Z

@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 · 2021-06-16T16:39:31Z

Thanks for the extra info.

Romej · 2021-06-16T17:30:01Z

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

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

dgattey · 2021-06-25T00:32:15Z

macOS 11.3.1 Macbook Pro M1, Firefox 89.0.1.

I installed React devtools for the first time ever on Firefox on this computer
Navigated to my localhost site that was already running before extension install
Refreshed the page with cmd-R with DevTools open and Caching disabled in Firefox DevTools settings
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 · 2021-06-25T00:33:57Z

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 · 2021-06-25T02:56:19Z

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

sj-rai · 2021-07-05T06:54:07Z

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 · 2021-07-05T07:12:18Z

The image file is missing

lunaruan · 2021-08-20T18:29:29Z

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

perqa · 2021-08-31T07:24:43Z

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:

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

Steps to reproduce:

Activate React devtools profiler in Chrome
Reload page in Chrome
Start standalone React devtools (Electron app)
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 · 2021-09-11T14:53:35Z

@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 · 2021-09-13T18:06:44Z

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 · 2021-09-14T13:51:11Z

@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 · 2021-09-14T14:26:02Z

@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 · 2021-09-14T21:58:51Z

@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 · 2021-09-15T19:03:19Z

@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 · 2021-09-15T20:11:12Z

the branch extract-nodeproto-utica

noahehall · 2021-09-15T20:12:51Z

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

bvaughn · 2021-09-15T21:30:26Z

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 · 2021-09-27T01:35:40Z

@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 · 2021-09-27T14:56:06Z

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 · 2021-09-28T09:21:56Z

Website or app

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

Repro steps

Load page.

Open react components.

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 · 2021-09-28T12:20:12Z

Thank you for the extra information @virajtk

macbury · 2021-10-02T17:24:58Z

Same problem here :(

jstejada · 2021-10-20T16:24:40Z

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

idelice · 2021-12-13T19:15:45Z

Just produced today.

bvaughn · 2021-12-13T19:20:21Z

@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 · 2021-12-20T14:02:19Z

The same issue with the last RN and node 16.13.1

bvaughn · 2021-12-20T14:03:58Z

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 · 2021-12-25T06:18:58Z

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 · 2021-12-28T08:02:12Z

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

bvaughn · 2022-01-12T13:48:08Z

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 · 2022-01-20T21:54:24Z

Possible fixed by #23156.

Bablu-singh · 2022-01-23T10:20:23Z

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

bvaughn · 2022-01-24T14:19:34Z

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 · 2022-07-14T09:47:38Z

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.

Bodyhealer added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels Jun 7, 2021

bvaughn assigned Bodyhealer Jun 7, 2021

bvaughn added the Resolution: Needs More Information label Jun 8, 2021

bvaughn unassigned Bodyhealer Jul 7, 2021

jstejada mentioned this issue Oct 20, 2021

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

Closed

bvaughn mentioned this issue Oct 21, 2021

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

Closed

This was referenced Oct 26, 2021

[DevTools Bug]: Blank tools localhost only #22577

Closed

DevTools can't load Components tree in Components Tab #22636

Open

bvaughn mentioned this issue Dec 4, 2021

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

Closed

lunaruan mentioned this issue Dec 10, 2021

[DevTools Bug] Could not find node with id "99" in commit tree #22871

Closed

jstejada mentioned this issue Dec 15, 2021

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

Closed

bvaughn mentioned this issue Dec 16, 2021

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

Closed

friederbluemle mentioned this issue Dec 16, 2021

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

Open

Slyness98 mentioned this issue Jan 11, 2022

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

Closed

bvaughn mentioned this issue Jan 12, 2022

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

Closed

bvaughn closed this as completed Jan 24, 2022

ariccio mentioned this issue Feb 10, 2022

[DevTools Bug] Cannot remove node "612" because no matching node was found in the Store. #23202

Open

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

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

Comments

Bodyhealer commented Jun 7, 2021

Website or app

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)

bvaughn commented Jun 7, 2021 • edited Loading

rdcavanha commented Jun 13, 2021 • edited Loading

bvaughn commented Jun 14, 2021

rdcavanha commented Jun 14, 2021

bvaughn commented Jun 15, 2021 • edited Loading

rdcavanha commented Jun 16, 2021

bvaughn commented Jun 16, 2021

Romej commented Jun 16, 2021 • edited Loading

dgattey commented Jun 25, 2021 • edited Loading

bvaughn commented Jun 25, 2021 • edited Loading

dgattey commented Jun 25, 2021

sj-rai commented Jul 5, 2021

ghost commented Jul 5, 2021

lunaruan commented Aug 20, 2021 • edited Loading

perqa commented Aug 31, 2021 • edited Loading

millikr2 commented Sep 11, 2021 • edited Loading

noahehall commented Sep 13, 2021 • edited Loading

bvaughn commented Sep 14, 2021 • edited Loading

noahehall commented Sep 14, 2021 • edited Loading

noahehall commented Sep 14, 2021 • edited Loading

bvaughn commented Sep 15, 2021 • edited Loading

noahehall commented Sep 15, 2021

noahehall commented Sep 15, 2021

bvaughn commented Sep 15, 2021 • edited Loading

noahehall commented Sep 27, 2021 • edited Loading

bvaughn commented Sep 27, 2021

virajtk commented Sep 28, 2021

Website or app

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)

bvaughn commented Sep 28, 2021

macbury commented Oct 2, 2021

jstejada commented Oct 20, 2021 • edited Loading

idelice commented Dec 13, 2021

bvaughn commented Dec 13, 2021

KonstantinZhukovskij commented Dec 20, 2021

bvaughn commented Dec 20, 2021

AllanChain commented Dec 25, 2021 • edited Loading

Bodyhealer commented Dec 28, 2021

bvaughn commented Jan 12, 2022 • edited Loading

bvaughn commented Jan 20, 2022

Bablu-singh commented Jan 23, 2022

bvaughn commented Jan 24, 2022 • edited Loading

troZee commented Jul 14, 2022

bvaughn commented Jun 7, 2021 •

edited

Loading

rdcavanha commented Jun 13, 2021 •

edited

Loading

bvaughn commented Jun 15, 2021 •

edited

Loading

Romej commented Jun 16, 2021 •

edited

Loading

dgattey commented Jun 25, 2021 •

edited

Loading

bvaughn commented Jun 25, 2021 •

edited

Loading

lunaruan commented Aug 20, 2021 •

edited

Loading

perqa commented Aug 31, 2021 •

edited

Loading

millikr2 commented Sep 11, 2021 •

edited

Loading

noahehall commented Sep 13, 2021 •

edited

Loading

bvaughn commented Sep 14, 2021 •

edited

Loading

noahehall commented Sep 14, 2021 •

edited

Loading

noahehall commented Sep 14, 2021 •

edited

Loading

bvaughn commented Sep 15, 2021 •

edited

Loading

bvaughn commented Sep 15, 2021 •

edited

Loading

noahehall commented Sep 27, 2021 •

edited

Loading

jstejada commented Oct 20, 2021 •

edited

Loading

AllanChain commented Dec 25, 2021 •

edited

Loading

bvaughn commented Jan 12, 2022 •

edited

Loading

bvaughn commented Jan 24, 2022 •

edited

Loading