[DevTools Bug] Children cannot be added or removed during a reorder operation.

[amalfrost]

Website or app

https://redeemerllc.com

Repro steps

when searching the products

How often does this bug happen?

Often

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

5.0.2-47cf347e4

Error message (automated)

Children cannot be added or removed during a reorder operation.

Error call stack (automated)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1134857
    at A.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1101500)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1103188
    at bridgeListener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1509150)

Error component stack (automated)

No response

GitHub query string (automated)

https://api.github.com/search/issues?q=Children cannot be added or removed during a reorder operation. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[callumlocke]

I'm getting this too, seeing the error reported only at the top of the local React devtools (Electron app) with a link to this issue. Error doesn't show in the browser console. There's nothing in the stack trace pointing at my files, only modules within react-devtools-core. I've no idea what it means but I notice chrome-extension:// in the call stack in the issue report above, which might be relevant because my app under development is a Chrome extension.

[Stevengez]

Not sure if this can help anyone, but for me this bug occurred only when there was a list of elements (with map) that happened to have two elements with same key, after removing the duplicate, the bug was gone.

[callumlocke]

@Stevengez thanks, I also have a separate bug involving duplicate keys which is probably not separate after all

[imadtg]

Not sure if this can help anyone, but for me this bug occurred only when there was a list of elements (with map) that happened to have two elements with same key, after removing the duplicate, the bug was gone.

had the bug happen to me in the same way.

[aurobindobhuyan]

I was also getting the same error, I was using Next.js 14.2, which could be the reason I didn't get the duplicate key warning. After struggling a couple of times I discovered that error, and replaced it with the index numbers. And it solved 🥲