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

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.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 27 (12 by maintainers)

Most upvoted comments

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!

developit on Feb 24, 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.

developit on Feb 7, 2017

Awesome, thanks for the update!

mlmorg on Dec 1, 2016

It’s caused by errant recycling and the recycler is internal. I know @nekr worked around it by forking and disabling the recycler.

Some have found success by adding keys, but it’s hard know which component is causing the issue.

developit on Mar 20, 2017

Sorry to leave this hanging, there!

developit on Dec 1, 2016