Unhandled rejection Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

[LELOG]

[LELOG]

Rendering errors in the react

[dungcodelynx]

I also suffers from this error. The interesting part is that there is another bug making dragging item display other HTMLElement #1380 . So I guess there is must be a relation with this bug.

[owen-m1]

Could you please create a JSBin or provide access to a live program that produces this error?

[owen-m1]

@cheton I saw this issue occurs in the last example of your demo when moving an item from the left list to the right list

[cheton]

So far I cannot figure out a way to easily reproduce this issue, but sometimes this will happen when calling unmountHostComponent within react-dom, as shown below:

When the exception occurrs in removeChild(currentParent, node.stateNode), it shows that the parentInstance is on the left side:

However, the child node itself is actually on the right:

I believe the way we manipulate the DOM may cause unexpexcted behaviour to React, but I'm not sure what actions will affect React's Virtual DOM in this case.

[owen-m1]

@cheton It only happens if you move an item from the left to the right on the demo above the last one.. and then when you do the same thing on the last demo it causes the error.

It has to do with line 64.

[cheton]

@owen-m1 The removeChild exception is occurred within react-dom when calling unmountHostComponent in React v16 (Fiber) (or processUpdates in DOMChildrenOperation with React v15), not the line #64 in src/Sortable.jsx as you mentioned:

So even remove the line of removeChild from the code will not help, I just removed the line and can confirm this issue still happened.

[owen-m1]

@cheton Yeah you're right.. I wasn't using the debugger. Could it be that when you are changing the state of the list on the left, react DOM sees it needs to remove the list item you dragged to the right, but when it tries to remove it, it cannot because Sortable has already moved it to the other list.

[gmasci-ca]

any news?

[gmasci-ca]

I've the same problem

[jkrasnay]

You can fix this by moving the DOM element back to its original position in your onAdd handler and letting React handle its removal. This is how they do it in the react-sortablejs module:

react-sortablejs/src/Sortable.jsx

Lines 58 to 59 in 114a664

	const referenceNode = (store.nextSibling && store.nextSibling.parentNode !== null) ? store.nextSibling : null;
	evt.from.insertBefore(evt.item, referenceNode);

You might be able to get away with passing null instead of tracking the reference node, which adds the node back as its parent's last child. You probably have to have a key property on the child nodes, though.

[ultralabed]

Currently, this can be reproduce by following steps

1. Select item from Uncontrolled list on the left, then drag it to the right.
2. Select item from Controlled list on the left, then drag it to the right.
3. You will see error in the console

Below is an gif console logging the event handler from the sortable.js and reproduces of the this bug.

[cheton]

Thank @ultralabed for fixing this issue. It's fixed in v1.5.1 and was published to npm. Please let us know whether you are still facing this issue.