CODEWITHSUNDEEP
javascriptreactjsredux
Hareesh
Hareesh

Reputation: 1587

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

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>
    )
}

Upvotes: 23

Views: 32873

Answers (7)

szymeo
szymeo

Reputation: 431

In my case this error was caused because of using React fragment, code was more a less like:

return (
  <>
    {something.map(() => <p>foo</p>)}
  </>
)

fixed it by replacing <> and </> respectively with <div> and </div>

Upvotes: 0

RizwanShahid
RizwanShahid

Reputation: 31

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>

Upvotes: 2

pHiL
pHiL

Reputation: 1889

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>

Upvotes: 2

Franky Kraisorn
Franky Kraisorn

Reputation: 97

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.

Upvotes: 0

John Mc
John Mc

Reputation: 411

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)}>

Upvotes: 2

Alexander
Alexander

Reputation: 1380

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">

Upvotes: 53

Ryan Shillington
Ryan Shillington

Reputation: 25107

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>

Upvotes: 24

Related Questions