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

[JaapioNL]

Website or app

http://bestellen-a.cito.nl

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://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]

@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]

@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]

@JaapioNL This site does not appear to be built with React? I'm getting a 503 page.

[JaapioNL]

@JaapioNL This site does not appear to be built with React? I'm getting a 503 page.

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]

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]

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]

@JaapioNL Any chance this source code is available for us to look at, to trim the bug down further?

[JaapioNL]

@JaapioNL Any chance this source code is available for us to look at, to trim the bug down further?

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]

@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]

@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.