toastdotdev/toast

Using a fragment in page-wrapper results in duplicated content

Opened this issue · 1 comments

johno commented

I have no idea what's happening here, but the following code results in my pages showing up twice in the built pages:

import { h, Fragment } from 'preact'
import { Helmet } from 'react-helmet'

export default ({ children, ...props }) => {
  return (
    <>
      <Helmet>
        <link rel="stylesheet" href="/styles.css" />
      </Helmet>
      <h1>Hello, world!</h1>
      {children}
    </>
  )
}

image

If I replace <> with <div> everything behaves as expected.

I think this is a Preact reconciliation thing? Not sure. Preact allows a third argument to render that is the element to replace. Perhaps we should be doing that.

let parent = document.getElementById('app');
render(h(HelloWorld), parent, parent.lastChild);

This only happens with top-level fragments afaict, so maybe there's something about how

render(h(Fragment, ...)) is problematic