Error: Failed to execute 'removeChild' on 'Node'

[gbowman85]

I am using the experimental/next version of dnd-kit. I'm using React/Next.js and the useSortable hook for arranging blocks vertically. Some blocks have child containers and I can drag sortable blocks into those child containers.
I also have a database using Convex that is mutated after every move of a block.
Moving blocks in a single list works fine, but when moving a block into the child container of another, the database is updated and then the query tries to render the blocks but gives this:
Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Has anyone has an experience with this? Is there anything I can do with dnd-kit to avoid this?

Thanks for any pointers.

[pyromatic-x]

Try to add event.preventDefault() in your onDragOver handler.

I had almost the same setup like you but instead of DB I had Zustand store. event.preventDefault() helped me to solve this issue.

Discussion