Fragment under boolean condition leads to crashes

[yevmoroz]

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

What is the current behavior?

Having such code sample inside render's return block

{booleanVariable && <Fragment>contents</Fragment>}

Results in error of a kind

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

About 1% of users of an application were affected by this, however, I myself was not able to reproduce it. From a component error stack I was able to track-down where possibly can be an issue. Replacing {booleanVariable && ...} with ternary {booleanVariable ? ... : null} resolved the problem and our users are not facing it anymore.

What is the expected behavior?
React not throwing error. Maybe warning? Not rendering that particular part? But not crashing the whole application.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
It crashed with react version 16.9.0, other versions were not tested. Users that were affected have Windows 7+, Mac OS 10.13+ and Chrome 77+.

[threepointone]

Please share a reproducing example? You could use codesandbox, or a git repo.

[yevmoroz]

I would love to give you more information, but like I mentioned before, as of now don't have a reproducible example. Sorry.

[threepointone]

I can't reproduce this error. Here's a simplified version of what you shared https://codesandbox.io/s/nostalgic-jennings-inwhd Observe that it works as expected.

My guess is that you have something else on your page that's interfering with the page, possibly a browser extension. It's also possible that booleanVariable isn't a boolean at all, and only works with the ternary because of the explicit checking.

I'm going to close this issue, but I'd be happy to discuss/reopen if there's more information provided.

[yevmoroz]

It's boolean for sure. Also not sure what kind of content inside would be replaced by browser extension. What was a bit suspicious for me was React.memo() inside one of the child elements, do you think this can cause something?

[threepointone]

I don't think so, but if it's a bug, I wouldn't know haha.

[kevinjuanjacque]

I had the same problem deactivating translator, I solve my error