Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':

Question

I have a div where inside another three divs are appending as follows. The state values are setting by looping the result from an api from componentWillReceiveProps(). But I'm facing an issue with an error

Uncaught 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

and if the api result is null gets

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

How can I fix this?

componentWillReceiveProps(nextProps) {
    var sub1 = [], sub2 = [], sub3 = [];
    if(result) {
        result.sub1.map((item, index) => {
            sub1.push(
                <div>
                    <p>{item.name}</p>
                </div>
            )
        })
        result.sub2.map((item, index) => {
            sub2.push(
                <div>
                    <p>{item.name}</p>
                </div>
            )
        })
        result.sub3.map((item, index) => {
            sub3.push(
                <div>
                    <p>{item.name}</p>
                </div>
            )
        })

        this.setState({ subDiv1:sub1, subDiv2:sub2, subDiv3:sub3 })
    }
}

render() {
    return(
        <div className="row top_bar">
            <div className="search left col-xs-5 col-sm-4 col-md-5 col-lg-6">
                <form>
                    <input type="text" id="search_box" name="search_box" placeholder="Search" onKeyUp={this.keyUpFn} />
                </form>
                <div className="div1">
                    { this.state.subDiv1 }
                    { this.state.subDiv2 }
                    { this.state.subDiv3 }
                </div>
            </div>
            <div className="top_right col-xs-7 col-sm-8 col-md-7 col-lg-6">
                <div className="top_outer">
                </div>
            </div>
        </div>
    )
}

Tonina

Can you provide a full runnable example please? This message sounds like a bug. – Paymar

This is somewhat a small portion of my project. To create this as a runnable example is little difficult now. Please don't feel bad – Tonina

I think something like insertbefore should be used somewhere. I don't know where to use it. Do you have any idea? – Tonina

My best guess is you have some code that messes with the DOM produced by React, and when React later tries to update it, it can't find the nodes. But it's hard to say without seeing your project. In general, the code you showed is quite strange. You're not really supposed to use React like this. Instead, rendering should be done in the render method. – Paymar

Is this a wrong method to loop and set state from componentWillReceiveProps and use state value inside the render method ? – Tonina

You should almost never need componentWillReceiveProps in your code. Yes, it's probably wrong, but I can't say what's the right way because I don't know what you're trying to do. Typically you shouldn't need to put JSX outside the render method. – Paymar

Also, what is result? – Paymar

This is for a search box and the search api result will be of three types and each type separately looping and appending them to a div. – Tonina

Why aren't you doing this in render? – Paymar

As you suggested I tried the same thing inside the render and got the same error. – Tonina

I can't help without a reproducing example. – Paymar

I think its because of appending the three div parallel to the main div inside render. But I couldn't find a solution for this and I'm stuck with this. Will be helpful if you could help me – Tonina

Can you help me if I give you the api result? – Tonina

Not really, the problem is in the code. – Paymar

Please check the updated render method in the question. Can you find any issues now? – Tonina

No, as I said earlier this error might mean something is messing with the DOM. It might be in another component or another library. Like if you use jQuery or something similar. – Paymar

Let us continue this discussion in chat. – Tonina

Answer 1

Sometimes it happens when users use Google Translate, it mutates text nodes, and React breaks on the next render. More info and how to fix it: https://github.com/facebook/react/issues/11538#issuecomment-390386520

You can also add the next properties to the HTML tag to disable Google Translate and fix this problem:

<html class="notranslate" translate="no">

Peachey

Is translating via Google Translate in Chrome then fully disabled then or just not automatically translated? – Deedradeeds

@CodingYourLife, it will fully disable Google Translate on the page. – Peachey

This just saved my day!!! :+1: – Kalagher

Answer 2

I believe this is failing because you are rendering outside of the render method. I also had this problem and it was because I had code like the following in my render method:

<div id="myContent">
  {this.getMyContentFromAChildClass()}
</div>

And then elsewhere in the class, I was using a 3rd party library, SimpleBar, to add a scrollbar to the div using JQuery like so:

const myContentElement = $("#myContent")[0];
if (!this.scrollbar && myContentElement) {
  this.scrollbar = new SimpleBar(myContentElement, {autoHide: false});
}

SimpleBar adds it's own divs in the mix, and when React tried to render the {this.getMyContentFromAChildClass() it was confused where to add it, and I got the above error message.

The fix was to not modify the parent div directly:

<div id="myContent">
  <div id="addingThisExtraDivIsTheFix">  <-- Add This
    {this.getMyContentFromAChildClass()}
  </div>
</div>

Aftertime

You're a legend for this answer, been trying to fix this issue for hours now but added an extra container inside the parent and my code works now:) – Commit

Awesome answer: thanks a lot for doing this! Would be extra ideal if we could really understand it was confused where to add it by looking at the source/mechanism? – Numberless

Answer 3

The solutions above did not work for me.

What worked was adding a key to the parent, based on the changing values. In React, a changed key is an indication to re-render the component, which is what OP wants in this case.

Change the parent div with className='div1' to the following:

<div className="div1" key={JSON.stringify(nextProps)}>

Wile

I spent many minutes on this error and this fixed it for me. Adding a key to the parent object did the magic. – Hards

Answer 4

whoever comes here and uses MaterialUI and you are using <LoadingButton>, that is likely where the crash happens. Simply wrap the children in a span to fix it.

<LoadingButton><span>Text</span></LoadingButton>

Isocrates

why would the LoadingButton causing such issue? – Castorina

@YaserAZ see for full answer github.com/mui/material-ui/issues/27853 – Isocrates

Answer 5

Basically Google Translate replaces text nodes with <font> tags containing translations, while React keeps references to the text nodes that are no longer in the DOM tree.

Like in below example:

<div>
  {condition && 'Welcome'}
  <span>Something</span>
</div>

The easiest workaround is to wrap those text nodes with <span> so that nodes referenced by React will stay in the DOM tree even though their contents are replaced with tags.

Workaround:

<div>
  {condition && <span>Welcome</span>}
  <span>Something</span>
</div>

Sunbreak

Answer 6

I have the same issue. In my case, I have also installed DeepL and TransOver on my Chrome. My solution was removing DeepL and TransOver extensions as well as disbling Google Translate then it became working. FYI, Only disabling DeepL and TransOver extensions may works as well.

Ligule