react: unmount an empty component is breaking with ReactDOM portals

Still facing this in 16.8.6

@278kunal I was also receiving this same error in 16.8.6. However, I just discovered that I was receiving this error for a different reason than mentioned in this thread. I was using createPortal to append my component to a sibling container (Bad practice, but I had to do this as a workaround with a 3rd party library I’m using). My code looked something like this:

render() { return ( <div> <div id="container"></div> {ReactDOM.createPortal(<div>Append Me</div>, document.getElementById("container")) </div> ) }

When the page unmounted, React removed the container before it removed the actual portal. I fixed this by simply reordering the createPortal before the sibling container I was appending to. That way React destroys the portal prior to the container. So it looks like this:

render() { return ( <div> {ReactDOM.createPortal(<div>Append Me</div>, document.getElementById("container")) <div id="container"></div> </div> ) }

Just thought this might help someone else 😃

I’m guessing it’s somewhere here

https://github.com/facebook/react/blob/c11015ff4f610ac2924d1fc6d569a17657a404fd/packages/react-reconciler/src/ReactFiberCommitWork.js#L741-L775

Or here:

https://github.com/facebook/react/blob/c11015ff4f610ac2924d1fc6d569a17657a404fd/packages/react-reconciler/src/ReactFiberCommitWork.js#L989-L1077

Fixed in 16.8.2

• Node.removeChild() - Web APIs | MDN

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

fix:

   unmountContainer() {
      // macro task
      setTimeout(() => {
        // refs
        if (containerEle) {
          // receive removed node
          // eslint-disable-next-line no-unused-vars
          let removedChild = document
            .querySelector('.page__wrapper')
            .removeChild(containerEle);
        }
      });
    }

I also started getting this, but in the strangest place. At first I thought it was in react-sortablejs, since it does DOM manipulation, but in React 16.12.0 it worked, and gave this error in 16.13.1.

Turns out I was doing something wrong with useSelector in Redux. I basically returned a copy of my redux state, so the selector subscription was changed every time a rerender was triggered. Wasn’t an obvious fix, I really had to backtrack and go through a lot of things and fixed my useSelectors with proper selector function.

Think in my case it was zombie children: https://react-redux.js.org/api/hooks#usage-warnings

Thanks, this was very helpful. I sent a fix in https://github.com/facebook/react/pull/14820.