[DevTools Bug] Cannot add node "1" because a node with that id is already in the Store. #24162
Description
Website or app
Repro steps
Just opening the console and going to Components or Profiler shows this error.
I noticed that in the console there are two warnings for contentScript.js (I am assuming this file is part of this extension):
contentScript.js:113 [Violation] 'message' handler took 210ms
contentScript.js:113 [Violation] 'message' handler took 891ms
How often does this bug happen?
Sometimes
DevTools package (automated)
react-devtools-extensions
DevTools version (automated)
4.24.0-82762bea5
Error message (automated)
Cannot add node "1" because a node with that id is already in the Store.
Error call stack (automated)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:26326:41
at bridge_Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24400:22)
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24566:14
at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:54300:39)
Error component stack (automated)
No response
GitHub query string (automated)
https://github.com/api/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
Metadata
Metadata
Type
Projects
Milestone
Relationships
Participants
Activity
bvaughn commentedon Mar 25, 2022
@JaapioNL The website you provided (cito-webshop.dev.local/winkelwagen) doesn't seem to be publicly accessible, so we can't look into this bug.
JaapioNL commentedon Mar 25, 2022
@bvaughn Sorry, copied the URL from my browser. But the application is also running on http://bestellen-a.cito.nl/ where it also gives this error. It is (on both environments) a bit inconsistent on when it does this. Sometimes it happens and sometimes it doesn't.
bvaughn commentedon Mar 25, 2022
@JaapioNL This site does not appear to be built with React? I'm getting a 503 page.
JaapioNL commentedon Mar 25, 2022
We just updated the application. it should have only given that message fore a minute. But sometimes the bootloader hangs and then the message stays on longer.
bvaughn commentedon Mar 25, 2022
Okay. the URL loads now, but after reloading the page multiple times– it seems to work okay. Is there something else you're doing? Are you sure you only have one copy of React DevTools installed?
(If you open
chrome://extensions/and search for "react" – do you only see one result?)Edit 1: Nevermind. On the 10th refresh, I saw the error. Looking...
Edit 2: Looks like this only happens when I do a hard refresh (SHIFT+R).
JaapioNL commentedon Mar 25, 2022
Those are the only extensions I have installed.
Yeah, it doesn't always happen and I have no idea why or why not. Sometimes I get an out of memory error on the page (and the dev tools are disconnected) #24064 but only when I have the React Developer Tools extension installed.
bvaughn commentedon Mar 25, 2022
@JaapioNL Any chance this source code is available for us to look at, to trim the bug down further?
JaapioNL commentedon Mar 25, 2022
I think I am allowed to share it directly with you (provided you don't share it). But I am not sure you can run all of it since it is build on JSS and I don't think this particular app can run in detached mode.
bvaughn commentedon Mar 25, 2022
@JaapioNL Okay. It would be useful for you to share this source with us if possible, please. You can forward it to me at bvaughn@fb.com.
What it looks like we're seeing is that– for some reason– some part of your website (maybe an ES6 polyfill?) is causing DevTools event handlers to be invoked multiple times, which in turn is causing some duplicate events to be sent from the DevTools backend to the frontend (which triggers our validation/invariant code). It might help us to see the source/dependencies.
bvaughn commentedon Mar 25, 2022
@JaapioNL It seems like the issue might have something to do with the react-easy-state's auto-batching of methods like
addEventListener. Not totally sure yet, but it seems like "message" event handlers are being called multiple times– and this is the only thing that jumps out as being different for your site vs other random React websites that don't demonstrate this bug.Next step is probably for us to create a small react-easy-state app and see if we can repro the bug in it.
bvaughn commentedon Mar 25, 2022
It looks like we can repro this behavior (SHIFT+R causes DevTools to throw) with small React app that just uses the react-easy-state boilerplate example code:
Edit 1: Worth pointing out that it's a lot harder to repro in this smaller app. It's possible that it's reproducible without this library (just harder).
Edit 2: It may have been a false positive. I'm not able to repro it anymore in the small project. I think this issue is somehow related to the batching overrides that react-easy-state is doing with e.g.
setIntervalthough.JaapioNL commentedon Mar 25, 2022
@bvaughn I've mailed you the code
bvaughn commentedon Mar 28, 2022
@JaapioNL Where did you send the email to? I did not receive it. Maybe it was flagged by Gmail's spam (if you sent it there)?
bvaughn commentedon Mar 28, 2022
Picking this back up and looking into it today… Looks like there are a ton of duplicate "message" events being fired on the
windowwhen hard-refreshing the specific project @JaapioNL linked to above. I can't repro this on smaller projects. (By "a ton" I mean – sometimes only a couple, in which case DevTools shows an error – but other times 70 or 80, in which case, DevTools freezes entirely.)bvaughn commentedon Mar 28, 2022
I think I can fix this issue by just...short-circuiting that method once a connection has already been established. I'm not sure of the conditions that cause this case though.
bvaughn commentedon Mar 28, 2022
PR #24186 fixes this issue, but I think the code on your site (specifically probably the stuff from react-easy-state?) seems likely to be breaking things and should be fixed IMO.