Preact: Uncaught (in promise) DOMException: Failed to execute 'replaceChild' on 'Node': The new child element contains the parent.

[andretw]

React version:

• [email protected]

preact-compat version:

• [email protected]
• [email protected]

Error:

VM12394:328 Uncaught (in promise) DOMException: Failed to execute 'replaceChild' on 'Node': The new child element contains the parent.
    at Error (native)
    at renderComponent (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:328:71)
    at setComponentProps (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:281:103)
    at buildComponentFromVNode (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:362:13)
    at idiff (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:176:48)
    at innerDiffNode (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:231:21)
    at idiff (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:185:279)
    at diff (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:157:19)
    at renderComponent (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:323:32)
    at setComponentProps (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:281:103)

Code:

const ChatWindow = props => {
  const emote = props.is_emote_open ? <EmoteSelector {...props} /> : null
  const options = props.is_options_open ? <ChatOptions {...props} /> : null
  return (
    <aside className={styles.root} >
      <ChatWindowHeader {...props} />
      <MessageWindow {...props} />
      <ComposeMessage {...props} />
      {emote}
      {options}
    </aside>
  )
}

ChatWindowHeader contains a button to control showing {options} or not. But it will cause DOMException in preact-compat version but works well in react version.

https://github.com/developit/preact/blob/master/src/vdom/component.js#L154-L157
The base and the parent are not correct in my case.

[developit]

Thanks for moving this over from preact-compat. In order to debug, it's useful to know if any Pure Functional Components are involved in the tree that's erroring out on render. Any chance EmoteSelector, ChatOptions or their children are PFCs?

[andretw]

Thank you for your quick reply. Only <ComposeMessage /> is PFC, the rest of others are p/React.Component.

PFCs will cause the issue?

[developit]

They shouldn't, but the rendering paths for PFC's and regular components are currently a little different.

I'm actually thinking this is a duplicate of (same underlying issue as) #349. Do EmoteSelector and ChatOptions render different tag names (nodeNames) as their root elements?

[andretw]

EmoteSelector is <section />, ChatOptions is <aside />

Wow, my code did the similar thing to #349. Might be the same issue.

[developit]

Great! Since I have a minimal reproduction of that issue, it should be solved shortly. I'll keep this open until it's fixed! Thanks for the quick responses.

[developit]

By the way - you might find that adding keys to those conditional components or wrapping them in a div works as a workaround in the meantime.

[andretw]

Yep, according to your ref #349, I'm trying to wrap them in a div currently. Thanks!

[andretw]

[Update] Wrapping them in a div really works!

[developit]

Awesome! Now to find this pesky bug 😈

[developit]

@andretw - would it be alright if I closed this out as a duplicate of #349?

[andretw]

yep, of course, I hope they are the same root cause. 😆