Failed to execute 'insertBefore' on 'Node'

[vbrvk]

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

I am not shure if it is react bug, or my code, or anything else, but i got next error message from client logs. I don't use any other library to manipulate DOM. Unfortunatly I can't figure out which part of my code throw this

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

../node_modules/react-dom/cjs/react-dom.production.min.js (at c.child.return=c,c=c.child}if(!) 190:258)
in ../node_modules/react-dom/cjs/react-dom.production.min.js (at 4:break;default:A("163")}}U=U.nextEffect}}catch(Wa){f=!0,g=Wa}f&&(null===U?A) 215:424)
in ../node_modules/react-dom/cjs/react-dom.production.min.js (at Vh) 211:213)
in ../node_modules/react-dom/cjs/react-dom.production.min.js (at Qh) 210:276)
in ../node_modules/react-dom/cjs/react-dom.production.min.js (at Qh) 210:112)
in ../node_modules/react-dom/cjs/react-dom.production.min.js (at wh) 208:243)
in ../node_modules/react-dom/cjs/react-dom.production.min.js (at kg) 206:315)
in ../node_modules/react-dom/cjs/react-dom.production.min.js (at isMounted) 147:224)
in ../node_modules/react/cjs/react.production.min.js (at isMounted) 12:343)
in ../node_modules/react-redux/es/components/connectAdvanced.js (at this.selector.run) 205:0)

Will appreciate any advices about possible sollution

Versions:
react: 16.4.0, react-dom: 16.4.0

[gaearon]

We'll need a reproducing example for this.

[gaearon]

Going to close since we can't help without a reproducing case. If you find one please file a new issue. Thanks!

[vbrvk]

I still can't reproduce it, but I have figure out which code throw an error (if I can trust the react componentDidCatch info).
I use styled-components and have next code:

export const Desc = styled.span`
  max-width: 40%;
  margin-right: 5px;
  font-size: .9rem;
  text-align: left;
`;


// later this component renders as

<Desc>{symbol}/ETH</Desc>

In Chrome DevTools this component looks like:

There are two textNode and I assume that problems is hiding here, but again, I can't reproduce it on any machine which I have.

I know that errors happend in next environment:

{
  "browser": { "name": "Chrome", "version": "63.0.3239.26" },
  "os": { "name": "Windows", "version": "NT 10.0", "versionName": "10" },
  "platform": { "type": "desktop" },
  "engine": { "name": "Blink" }
}

{
  "browser": { "name": "Chrome", "version": "68.0.3440.84" },
  "os": { "name": "Windows", "version": "NT 6.1", "versionName": "7" },
  "platform": { "type": "desktop" },
  "engine": { "name": "Blink" }
}

If you have any idea how can I try to reproduce the bug, please let me know. Thanks!

[gaearon]

My guess is that it's either #11538 or equivalent.

[vbrvk]

Seems you are right. Thanks you a lot!

[DaGhostman]

Think we've observed the same issue on our end it seems to be related to automated translation from google translate:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at yi (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:76637)
    at Fi (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:81449)
    at Vi (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:84893)
    at https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:98269
    at Object.t.unstable_runWithPriority (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:94:3194)
    at Tc (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:98204)
    at jc (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:97980)
    at xc (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:97325)
    at Dc (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:98700)
    at kn (https://assets.mailjet.com/build/app-components-04376153a9aaffa109ce.js:85:30568)

Should I attempt to provide a minimal sample that reproduces the problem

Browser: Version 75.0.3770.100 (Official Build) (64-bit)
OS: Ubuntu 19.04

[mjhoffm2]

I am running into this problem using react 16.8.6, what version will this be fixed for?

[rsshilli]

@mjhoffm2 I'm not convinced there's anything to fix in React. I got this error too and it turned out that it was my fault: https://stackoverflow.com/a/59845764/491553

[vincentaudebert]

FYI if it can help someone else, I had the same issue and turned out <br />s in my "dynamic" text were randomly causing the issue with Google Translate.

Solution was to replace <br /> with proper tags and now it works fine.

[j-perl]

I ended up here by chance and by turning Google Translate on, I could reproduce the issue our client was having. Thank you @vincentaudebert!

[hch-web]

@j-perl Thanks for helping us out. It really worked.

[prhbrt]

For other struggling with Failed to execute 'insertBefore' on 'Node'. I had a similar issue, and couldn't fix it:

{loading ? <Box className="loading-bar"><Typography><CircularProgress className="line-center m-left20" /> Loading annotations</Typography></Box> : undefined}

And used this alternative (which is not equivalent):

<Box className={`loading-bar ${loading ? "" : "hidden "}`}><Typography><CircularProgress className="line-center m-left20" /> Loading annotations</Typography></Box>

[SpeedyM282]

@j-perl bro thanks a lot for help!