React: "Failed to execute 'removeChild' on 'Node'" error on unmounting React portal with nulled child

[dennis90]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When you render a portal with null child value, if the portal is rendered in first place, then the app crashes and give the message:

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

But if you put the portal to render after the rest of component content, it works like it should.

On a debug i realized that's the other nodes of component are removed like the portal created div is a parent of the other nodes of component, that's the cause of this error.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I did a example project (https://codesandbox.io/s/910pqpn23r?module=%2Fsrc%2FTableRow.js)

After you run, you need only to click the button to see the error.

What is the expected behavior?

Unmount the component correctly

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Tested React version: 16.6.3 and i don't know if this already worked on any previous versions.

[bvjebin]

@dennis90 In PortalComponent.js, changed the render method to this and it stopped throwing error.

return !this.props.display
      ? null
      : createPortal(<div>{this.props.message}</div>, this.container);

Note: The modal implementation is not complete, so the modal won't show up.

[gaearon]

My hunch is this might be a bug.

[gaearon]

Likely the same: https://github.com/facebook/react/issues/14811

[278kunal]

We have recently migrated our codebase from React 15.4.0 to 16.8.6. After all the code mods were are getting this error 'Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node' where we are updating the UI asynchronously.

[surendragalwa11]

facing this same issue when I integrated a 3rd party library which tries to manipulate DOM and remove child elements.
(In my case jsmpeg-player library was removing canvas element when I was destroying player instance.)
For more details see my repo -> Github Fiddle

Thanks.

[threepointone]

The original issue here (regarding portals) was fixed in 16.8.2. Please file new issues if you face similar issues, with reproducing examples. Closing this issue.

[tuanndl]

I met the same : Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

[gaearon]

@tuanndl This is not useful without a reproducing example. I'm going to lock this issue. Please file a new issue with a reproducing example if you have one!