facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
228.51k stars 46.76k forks source link

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

Open ansharah-gs opened 1 year ago

ansharah-gs commented 1 year ago

Website or app

running react app

Repro steps

i just made a basic portfolio app on react app and suddenly this bug showed up, and i cant seem to access the localhost link in any browser beside Firefox

How often does this bug happen?

Often

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.27.8-2468a8735

Error message (automated)

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

Error call stack (automated)

emit@moz-extension://961fb755-5a59-4c1c-943c-029f7cf6279b/build/main.js:27059:22
bridge_Bridge/this._wallUnlisten<@moz-extension://961fb755-5a59-4c1c-943c-029f7cf6279b/build/main.js:27228:14
listener@moz-extension://961fb755-5a59-4c1c-943c-029f7cf6279b/build/main.js:57497:41

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
SGP57 commented 1 year ago

I've got this same error.

I've run react-devtools for the first time today and got the error. There was failure in both the command window and the components tab of the chrome react developer tools (not sure about the terminology)

I've terminated the command window react-devtools and the data in the components tab of chrome ... is now working.

I'm running 4.28.0 (7/10/2023)

mayureshs commented 1 year ago

@hoxyq, when will this be released ? Is there a beta version that can be used until then ?

hoxyq commented 1 year ago

@hoxyq, when will this be released ? Is there a beta version that can be used until then ?

Hey, hopefully I will submit the release next week, and then it depends how long it will be reviewed (usually a couple of days). I am currently fixing some stuff related to it and testing internally at Meta, so it is not ready yet to be shipped for everyone.

But if you want to try it out, you can download corresponding artifacts from the CI - https://app.circleci.com/pipelines/github/facebook/react/45858/workflows/05ef139a-6b29-42d5-9608-9f0058272dec/jobs/714315/artifacts

Make sure that you have only 1 React DevTools extension installed and please share any errors that might occur.

mayureshs commented 1 year ago

Thanks for the update. I have installed the version from the CI artifacts. When the page first loads the extension works as expected. But upon going to other pages within the app, I still the error "Uncaught Error: Cannot remove node "4752" because no matching node was found in the Store.". Here are few screenshots that might help.

image image image image

Also getting this error image

This the errors I get from the manage extensions page image

hoxyq commented 1 year ago

Thanks for the update. I have installed the version from the CI artifacts. When the page first loads the extension works as expected. But upon going to other pages within the app, I still the error "Uncaught Error: Cannot remove node "4752" because no matching node was found in the Store.". Here are few screenshots that might help.

image image image image

Also getting this error image

This the errors I get from the manage extensions page image

I am currently trying to find ways to fix this, thanks! Reopening browser DevTools usually helps to resolve this error.

hoxyq commented 1 year ago

Thanks for the update. I have installed the version from the CI artifacts. When the page first loads the extension works as expected. But upon going to other pages within the app, I still the error "Uncaught Error: Cannot remove node "4752" because no matching node was found in the Store.". Here are few screenshots that might help.

image image image image

Also getting this error image

This the errors I get from the manage extensions page image

Hey, I've recently published 4.28.3 internally at Meta, and it seems far more stable. Can you try the same with https://app.circleci.com/pipelines/github/facebook/react/46032/workflows/ecf8fde9-3c42-4ff3-9c98-dd2974862576/jobs/715524/artifacts?

mayureshs commented 1 year ago

This version looks much promising. I will report any issues found during testing.

hoxyq commented 1 year ago

Hey, the browser extension v4.28.4 has been published today on Chrome's extensions store. This version includes various changes to the content scripts injection logic, which should be more reliable now.

Can anyone try upgrading to v4.28.4 and report if this is still reproducible?

Friss commented 1 year ago

Just got a notification about this bug (first time I've ever seen it FWIW)

Screenshot 2023-10-11 at 9 09 26 PM Screenshot 2023-10-11 at 9 09 40 PM
hoxyq commented 1 year ago

Just got a notification about this bug (first time I've ever seen it FWIW)

Screenshot 2023-10-11 at 9 09 26 PM Screenshot 2023-10-11 at 9 09 40 PM

Thanks for reporting this, did this happened multiple times or just once? Also, can you please share your actions, after which this error was displayed?

Friss commented 1 year ago

Just the one time.

Before it happened, I was debugging a dev build of an app for work, I was experiencing timeouts attempting to use the element selector from dev tools (the left list of elements loaded but clicking on any element would result in a timeout error on the right). Then I refreshed the page and got this error. (Submitted this report) and then refreshed and haven't seen it again though I also wasn't using it much afterwards.

devdlabs commented 1 year ago

MS Edge browser installed devtools two times, after removing. one, error gone.