React: removeChild error in renderers/dom/...DOMChildrenOperations, when a 3rd-party lib adds wrappers in the dom

[caub]

I get:

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

in:
https://github.com/facebook/react/blob/eb85b7b2c989faeb6ed8cd787cf67bd5f6d3ec7d/src/renderers/dom/client/utils/DOMChildrenOperations.js#L68

the source of the problem is a the 3rd-party lib (uikit.js) that transform the dom after is was mounted

so parentNode.removeChild(childNode); parentNode is the great-parent of childNode not the direct parent

so I guess all intermediate nodes should be removed until parentNode

possible fix:

  let [parent, child] = [childNode.parentNode, childNode];
  // remove all possible wrappers until reaching the initial parentNode
  do {
    child.remove();
    [child, parent] = [parent, parent.parentNode];
  } while (parent && child!==parentNode);

edit: probably, it could be the responsibility of that lib to clean the dom on componentWillUnmount

[martinez099]

same here when I use fabric.js + react 15 + meteor 1.3

[gaearon]

the source of the problem is a the 3rd-party lib (uikit.js) that transform the dom after is was mounted

I don’t think something like this is supported by React. You can tell React explicitly to never update children of some component that you manage manually or with a third party library by implementing shouldComponentUpdate() { return false } in your component. However you can’t expect that you can both change the DOM arbitrarily and re-render it with React at the same time.

[jimfb]

It is not possible for us to predict all possible mutations that could be applied to a DOM. Our general rule is that external libraries should not be mutating React DOM (although we do allow you to add children to leaf nodes, so long as that node will always remain a leaf node and never receive children which are managed by React).

[caub]

ok, no problem, I agree with your decision. (I have found a way to clean the dom, those components still need to be updatable because are part of a larger tree, in a page editor)

[mnpenner]

Can this error message perhaps be amended to say something like "Please check to make sure you or a 3rd party library is not manipulating the DOM manually"?

If I hadn't found this post I'd have been completely lost.

[jimfb]

@mnpenner The plan is to warn at the time of mutation, which is even more helpful. For reference: https://github.com/facebook/react/issues/3218

If you'd be interested in taking a stab at that PR (perhaps work with SalehHindi to get that diff cleaned up and landed), that would be a good first bug, you can help save someone else from suffering the problem you faced.

[xy-ty]

same here when I use dragula.js + react 16 + meteor 1.6 any one can help me

[gaearon]

As already noted above, this is not a problem with React. It is not supported to have third party libraries remove nodes that are already managed by React. If you need to have a third party library modify the DOM, add that DOM node to a leaf never-changing React node yourself in a lifecycle hook, and then you can do anything with it. This guide dives into more detail: https://reactjs.org/docs/integrating-with-other-libraries.html