Rendering components with identical children into the same parent container breaks

If you try to render two different components into the same parent container multiple times with shared child components the browser will throw an error:

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

"preact": "4.6.2",
"preact-render-to-string": "2.4.0"

Chrome Version 50.0.2661.75 (64-bit)

This is easier to explain with some code:

class Intro extends Component {
  render(props) {
    return (<span>Hello</span>)
  }
}

class Index extends Component {
  render(props) {
    return (
      <div>
        <Intro />
      </div>)
  }
}

class Join extends Component {
  render(props) {
    return (<Intro />)
  }
}

  let components = [Index, Join, Index, Join, Index]
  // This loop simulates the user navigating forward and backwards over two components.
  components.forEach(function(Cmp) {
    render(
      <Cmp data={window.preactProps} />,
      document.body,
      document.body.firstChild)
  })

[developit]

I’m going to close this issue out for now since we’ve got a solution, though I’ll likely re-reference it when I address making render() automatically detect and attach to existing rendered components.

edit: for reference, reproduction I was using to test: http://jsfiddle.net/developit/t8p15pps/

[developit]

True, it’s literally 2 bytes after gzip. I shouldn’t agonize over these things so much, haha.