fix[react-devtools]: Prevent duplicate node errors during rapid navigation in DevTools#36794
fix[react-devtools]: Prevent duplicate node errors during rapid navigation in DevTools#36794vidipsingh wants to merge 1 commit into
Conversation
|
Hi @vidipsingh! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
2 participants
Summary
Fixes: #36789
Fixes "Cannot add node 'X' because a node with that id is already in the Store" error occurring during rapid navigation in Next.js apps with
Node 24+. The issue was caused by a race condition where multiple DevTools mount attempts would subscribe to the same bridge operations event, causing duplicate node additions. The fix implements graceful duplicate handling in the Store, improves cleanup synchronization by shutting down the bridge before UI unmount, and increases the debounce timeout from500msto750msto accommodate faster execution in modern JavaScript runtimes.How did you test this change?
Verified locally by testing with Next.js app on
Node 24with rapid navigation and Fast Refresh cycles.Passing run: Before the fix, rapid page navigation in Next.js consistently threw "Cannot add node" errors in the DevTools console, breaking the component tree view. After applying the changes, navigated rapidly between pages 20+ times with zero errors and smooth DevTools updates.
Failure prevention: Temporarily removed the duplicate check, which successfully reproduced the original error
"Cannot add node '24' because a node with that id is already in the Store", confirming the fix prevents the issue. Also verified backward compatibility by testing with Node 18 and older Next.js versions - all scenarios worked correctly.