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

React version:

• react@15.3.2

preact-compat version:

• preact@6.3.0
• preact-compat@3.8.2

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]

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.