Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DOMException: Failed to execute 'replaceChild' on 'Node': The new child element contains the parent.

See original GitHub issue

This bug appears to occur when using some odd combination of higher order components.

Uncaught (in promise) DOMException: Failed to execute 'replaceChild' on 'Node': The new child element contains the parent.(…)
  renderComponent                     @ component.js:156
  setComponentProps                   @ component.js:45
  buildComponentFromVNode             @ component.js:231
  idiff                               @ diff.js:68
  innerDiffNode                       @ diff.js:184
  idiff                               @ diff.js:100
  diff                                @ diff.js:38
  renderComponent                     @ component.js:149
  rerender                            @ render-queue.js:21
  Promise.resolve (async)f            @ util.js:68
  enqueueRender                       @ render-queue.js:12
  setState                            @ component.js:81
  (anonymous function)                @ app.js:15
  setTimeout (async)componentDidMount @ app.js:14
  flushMounts                         @ diff.js:25
  diff                                @ diff.js:40
  render                              @ render.js:

You can generically reproduce this bug with this fork of preact-boilerplate.

I also tested the same component tree with React to be sure and it works as expected.

Issue Analytics

State:
Created 7 years ago
Reactions:3
Comments:27 (12 by maintainers)

Top GitHub Comments

2reactions

developitcommented, Feb 24, 2017

I wish I could give a more firm time, but I’ve learned that causes more harm than good. The problem is that people expect major releases to include huge performance improvements, so I have had to spend the last few weeks trying to find some. I did, so now I’m just working through the list of breaking change that need to get into the release. I don’t have anything on this weekend, so hopefully I’ll be able to publish a beta!

2reactions

developitcommented, Feb 7, 2017

@nowaalex This is because when DevTools is open, the preact/devtools hook is active, which transforms Pure Functional Components into classful components for tracking purposes. That circumvents the issue in a similar way to the rewrite above. I’m going to prioritize this fix for 8.0, likely cutting some of the planned breaking changes in order to get things out faster.

Top Results From Across the Web

The new child element contains the parent - Stack Overflow

Part of the problem is that you are assigning both the <td> and the <img> the exact same id. You can't do that....

Failed to execute 'replaceChild' on 'Node': The new child ...

This bug appears to occur when using some odd combination of higher order components. Uncaught (in promise) DOMException: Failed to execute ' ...

Node.replaceChild() - Web APIs - MDN Web Docs

The replaceChild() method of the Node element replaces a child node within the given (parent) node. Syntax. replaceChild(newChild, oldChild)

replace a child node with a new node — DOM Level 1 Core ...

The node that was removed from the document and replaced. Throws. This method may throw a DOMException with the following code values: HIERARCHY_REQUEST_ERR....

HTML DOM Element replaceChild Method - W3Schools

// Replace the first child node with the new <li> element: list.replaceChild(element, list.childNodes[0]);. Before:.