Unhandled Rejection (NotFoundError): Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

I have a component <ComponentWithVideo /> that contains a list of tracks that are being rendered in a single <video/> element.

That I rendered with <InPortal /> and displayed to <OutPortal />

This error occurs when I add another track and <ComponentWithVideo(s) /> re-renders.

[pimterry]

That would work, and it’s a nice quick workaround you can use to fix this today.

It does affect the DOM structure though in a way that could affect styles (e.g. direct descendent selectors) which I’d like to avoid.

Using an empty text node doesn’t have that problem, and should work equally well as a proper fix, so while an extra div is good as a quick workaround, I’d like to avoid implementing that as the real solution.

[pimterry]

Oooh, that’s really interesting, and yes that’s a complicated case that’s not handled well right now.

Any idea what the actual DOM transformations React is doing there are? The insertBefore in the previous case made sense, and seemed easy enough to handle, but it sounds like this is doing something different.

In the meantime, you can probably handle this (and many other similar cases) by using key to force React to re-render the OutPortal during this update, instead of moving it. That way, React will first call componentWillUnmount on the OutPortal (triggering the logic here that resets the placeholders), then it will mutate the DOM with placeholders everywhere as it expects, then it will mount a new OutPortal, and React-Reverse-Portal can then kick in and put the portal node content back. Since the actual DOM content lives inside your portalNode, making the OutPortal effectively stateless, that should be very cheap and totally invisible as a user.