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

Created on 9 Nov 2016 · 27Comments · Source: preactjs/preact

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.

The Wreckoning feedback needed

Source

ganemone

👍3

Most helpful comment

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 24 Feb 2017

❤2

All 27 comments

This appears to be fixed with preact 6.0.0 beta

ganemone on 9 Nov 2016

@ganemone - the latest release (not beta) is 6.4.0 - are you seeing the issue there?

developit on 10 Nov 2016

We tested the generic example (https://github.com/ganemone/preact-boilerplate) using 6.4.0

mlmorg on 10 Nov 2016

@mlmorg like tested and it worked? I haven't seen anything around this bug in 6.4. might be missing something though.

developit on 10 Nov 2016

Sorry, should have clarified. If you clone, install and run the forked preact-boilerplate above, you will see the exception using 6.4.0.

mlmorg on 10 Nov 2016

Here's the actual commit making changes to the default preact-boilerplate: https://github.com/ganemone/preact-boilerplate/commit/5088b54627b2213b651173268a0a9940e540f681

The comments mention how changing a line here or there (removing a div, removing the hoc, etc.) makes it work again.

mlmorg on 10 Nov 2016

Hey @developit, just bumping this thread to see what the status of this issue is. I've also tried the example with 7.0.3 and it continues to have the same issue. Thanks!

mlmorg on 1 Dec 2016

I'm working on 7.1.0 which I'm (really!) hoping will fix this. It's an issue that can be caused by a number of different things, but I think there are a lot fewer possibilities in 7.1.0.

I'm using your fork as a test btw.

developit on 1 Dec 2016

Awesome, thanks for the update!

mlmorg on 1 Dec 2016

❤2

Sorry to leave this hanging, there!

developit on 1 Dec 2016

👍1

Still present in 7.1.0

vojtatranta on 20 Dec 2016

Might have a repro around now actually.

developit on 20 Dec 2016

I am seeing this issue as well.

kanzelm3 on 22 Dec 2016

I am on version 7.1 too.

kanzelm3 on 22 Dec 2016

7.1.0
I also see it

nowaalex on 24 Jan 2017

Repros appreciated if anyone has this issue.

developit on 25 Jan 2017

I have just upgraded to 7.2.0. It is still present. Sometimes it could be fixed by replacing "button" with "div", but it is very dirty. Are there any more news about this issue?

nowaalex on 2 Feb 2017

Update: This will be fixed by the PFC rewrite! 🎉

developit on 4 Feb 2017

And is there some temporary fix to use now, because this thing completely crashes my app?
Also it is very interesting, that this bug depends on chrome devtools opened/closed state. If My devtools panel is opened, bug is not present. But if I close it, bug appears

nowaalex on 7 Feb 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 7 Feb 2017

👍2

@developit, do you have an approximate release schedule of 8.0 ?

nowaalex on 24 Feb 2017

developit on 24 Feb 2017

❤2

Is there a strategy to work around this in the meantime? I would like to to move radio.garden over to preact, but am stuck on this error..