toastdotdev / toast

The best place to stack your JAM. Toast is a Jamstack framework
153 stars 13 forks source link

Using a fragment in page-wrapper results in duplicated content #45

Open johno opened 3 years ago

johno commented 3 years ago

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.

ChristopherBiscardi commented 3 years ago

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