Failed to execute 'removeChild' on 'Node'

Question

I\'m using http://alexgorbatchev.com/SyntaxHighlighter/ to highlight code on my website but sometimes in my log im getting Javascript errors like this :

Answer 1

Try to translate your site with Google Chrome (right click on the site and choose "Translate to English". If you see the error happening in the console, then you know it's caused by Google Translate.

Related GitHub issue: https://github.com/facebook/react/issues/11538.

---

Workaround from Dan Abramov:

if (typeof Node === 'function' && Node.prototype) {
  const originalRemoveChild = Node.prototype.removeChild;
  Node.prototype.removeChild = function(child) {
    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);
  }

  const originalInsertBefore = Node.prototype.insertBefore;
  Node.prototype.insertBefore = function(newNode, referenceNode) {
    if (referenceNode && referenceNode.parentNode !== this) {
      if (console) {
        console.error('Cannot insert before a reference node from a different parent', referenceNode, this);
      }
      return newNode;
    }
    return originalInsertBefore.apply(this, arguments);
  }
}

Run this code before your app is rendered. Please keep in mind, that this has a slight performance hit.

---

Workaround from Shuhei Kagawa

Render texts in .

// Case 1

  {condition && 'Welcome'}
  Something


// A workaround for case 1

  {condition && Welcome}
  Something


// Case 2

  {condition && Something}
  Welcome


// A workaround for case 2

  {condition && Something}
  Welcome

A detailed explanation can be found here: https://github.com/facebook/react/issues/11538#issuecomment-390386520