"NotFoundError: Failed to execute 'removeChild' on 'Node'" when using React.Fragment <></> with Chrome extension which does not modify the DOM tree below the root div of the React app

[tonix-tuft]

This has already been discussed before (#14740), but there wasn't a reproducing example for this kind of issue and I think that my use case is also a bit different.

Do you want to request a feature or report a bug?
I believe this can be considered a bug.

What is the current behavior?
In order to reproduce this issue using Chrome, you will need to install the following Chrome extension called TransOver:

https://chrome.google.com/webstore/detail/transover/aggiiclaiamajehmlfpkjmlbadmkledi?hl=en

I use it to translate text on hover.
The only thing that this extension does is appending a tooltip with the translated text to the body HTML element when you hover an element with text (it doesn't seem it appends stuff below the React's root div element).

I have created two code sandboxes to show you better and explain the problem.
It is a minimal example of a movie app like the one Dan showed at JSConf 2018 in Iceland, though not as beautiful as his and without all that cool Suspense stuff, but at least it uses hooks :) .

• https://codesandbox.io/s/heuristic-lake-exxvu

• https://codesandbox.io/s/magical-grass-016kc

The two code sandboxes are essentially identical, the only difference is that the first one (heuristic-lake-exxvu) uses a div element for MovieApp, whereas the second (magical-grass-016kc) uses a React.Fragment (<></>) component:

heuristic-lake-exxvu's MovieApp:

const MovieApp = () => {
  const [currentMovie, setCurrentMovie] = useState(initialCurrentMovieState);
  const { isLoading, id: currentMovieId, movieDetails } = currentMovie;
  ...
  return (
    <div> // <======================= Uses a `div`
      {isLoading ? (
        "Loading..."
      ) : (
      ...

magical-grass-016kc's MovieApp:

const MovieApp = () => {
  const [currentMovie, setCurrentMovie] = useState(initialCurrentMovieState);
  const { isLoading, id: currentMovieId, movieDetails } = currentMovie;
  ...
  return (
    <> // <======================= Uses a fragment
      {isLoading ? (
        "Loading..."
      ) : (
      ...

Now, if you open heuristic-lake-exxvu and click on the Show movie info button of any movie in the list, you will see the Loading... text before the promise with the data of the movie resolves, and the Movie component is rendered.

Before the promise resolves, try hovering on the Loading... text with the TransOver extension enabled, you should see:

The world makes sense here, no errors, no warnings, everything works.

Now try to do the same thing on magical-grass-016kc, as soon as you hover Loading..., you will see the NotFoundError: Failed to execute 'removeChild' on 'Node' error logged in the browser's console:

Here is a streamable video showing this same error:

https://streamable.com/4gxua

What is the expected behavior?
In heuristic-lake-exxvu (uses a div instead of React fragment), everything worked.
The TransOver extension appends to body and does not modify the React's root div neither does it append stuff below it, so I would expect the code in the React fragment example (magical-grass-016kc) to behave the same and work as in heuristic-lake-exxvu.

Chrome is plenty of useful extensions like this one and they should not really interfere with React, I think that users using React applications may also install other extensions which modify the DOM which they find useful.
If an extension appends to body like TransOver does, I wouldn't expect React to have problems with it and cause undesirable effects and application errors like this one.

This is my opinion, I would be very glad to hear what you think about it, and if you think I have spotted a bug of React fragments (I think it's a bug because, again, it works when using a div in heuristic-lake-exxvu).

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Browser: Chrome
React v16.11.0
React DOM v16.11.0

[aweary]

@tonix-tuft is there any way you can reproduce the issue without the TransOver extension? It seems likely that the extension is doing something other than just appending an element to the body. Maybe try using Chrome's debugger to see what element it is failing on?

[tonix-tuft]

@aweary I could try patching Node.removeChild() and log the problematic child element.

I think this issue is related to:

https://stackoverflow.com/questions/21926083/failed-to-execute-removechild-on-node

[tonix-tuft]

I have added the following patched Node.prototype.removeChild method to a fork of magical-grass-016kc -> https://codesandbox.io/s/tender-lehmann-ryygj:

...
if (typeof Node === "function" && Node.prototype) {
  const originalRemoveChild = Node.prototype.removeChild;
  Node.prototype.removeChild = function(child) {
    console.log("removeChild...");
    console.log("this", this);
    console.log("this.outerHTML", this.outerHTML);
    console.log("child", child);
    console.log(
      "this.childNodes",
      this.childNodes.length,
      Array.prototype.slice
        .call(this.childNodes)
        .map(child => console.warn("child.nodeValue", child.nodeValue))
    );
    console.log("child.parentNode", child.parentNode.outerHTML);
    // debugger;
    if (child.parentNode !== this) {
      if (console) {
        console.error(
          "Cannot remove a child from a different parent",
          child,
          this
        );
      }
      return child;
    }
    return originalRemoveChild.apply(this, arguments);
  };
}
...

At the time when React throws the error (hover on the Loading... text), Loading... is the only child of <div id="root"></div>, but the strange thing I noticed is that the Loading...' text node's parentNode is null (child.parentNode).
Also I console.warned the childNodes of this (the expected parent) and you can see that the only node is the Loading... text node:

Could it be that TransOver replaces the original "Loading..." text node with a different one and React does not know that? But then, if TransOver does this, I would expect to see child.parentNode of this new text node to be again <div id="root"></div>, but it's null at the time of the error...

What could you advise me to do in order to replicate this issue without using TransOver? I do not know what kind of DOM mutation it performs...

[kasperpeulen]

@aweary I was able to reproduce this in this codesandbox:
https://vt25p.csb.app/

[tonix-tuft]

I can reproduce your error too.

[kasperpeulen]

Ah, yeah this is actually a different issue. Transover does not mutate the dom like google translate does.

[tonix-tuft]

Don't you think they are related?

[Valenoern]

While I'm not sure, this might be the same problem as happens with Chromoji and scrolling mastodon feeds.

https://github.com/smeeckaert/chromoji/issues/15
mastodon/mastodon#13814

react-dom.production.min.js:5058 DOMException:
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Chromium: 80.0.3987.163 (Official Build) (64-bit)

[bklatka]

Having the same issue here. Some translation extension is messing up fragment components

[FabianSellmann]

Is the workarround here then not to put text directly in a fragment, but rather wrap it with a proper dom element?

[firasdib]

I've been seeing these errors on regex101.com quite a lot, around 20,000 times in the past 14 days. After some googling I found this, and it seems like this might be the root cause. What are the mitigations? Is there any viable workaround?

[codingyourlife]

I can reproduce this and on our page it lead to registration crashing with a blank page when clicking a checkbox (not just locally also in production). I could solve it by changing the translated text from i18next <Trans /> component to the t() function.

I will report this to react i18next too and hope for a quickfix. I will point to this open issue. All in all it belongs here and I can confirm that it is still an issue.