Preact: Unable to hydrate client from server markup

[chrstntdd]

Howdy, I've tried setting up a preact X to be universally rendered, but I seem to be encountering some issues when hydrating the on the client.

Repo here: https://github.com/chrstntdd/preact-app

I think this is due to the error I'm receiving on the page:

preact-4825f25c.mjs:20 Uncaught Error: Objects are not valid as a child. Encountered an object with the keys {}.
    at preact-4825f25c.mjs:20
    at Array.forEach (<anonymous>)
    at n.diffed (preact-4825f25c.mjs:20)
    at n.diffed (preact-4825f25c.mjs:20)
    at n.diffed (preact-4825f25c.mjs:22)
    at $ (preact-4825f25c.mjs:1)
    at I (preact-4825f25c.mjs:1)
    at L (preact-4825f25c.mjs:1)
    at main-2b62d082.mjs:38

Also, I notice I only get these errors in the console when pulling in preact/debug - is this intentional?

From what it looks like, this error stops the client from booting up, thus the useEffect that runs on Page is never being ran.

Not sure where exactly to continue looking, hoping to hear back with a simple fix.

Congrats on the release as well 🎉

[marvinhagemeister]

The preact/debug module contains warnings and error messages for invalid code. In your case it looks like you're trying to render something which is not a virtual dom node (=vnode). This can happen in the following scenarios:

// INVALID: Trying to render an object literal
<div>{{}}</div>

// INVALID: Trying to render a random function
<div>{() => null}</div>

When you don't include that module and thereby disable all warnings, preact won't log anything to the console as you have discovered.

Having a quick look at your repo it looks like you're running into the second variant:

// App.tsx
export const App = () => ...

// browser.tsx
// INVALID: Trying to pass a function as a vnode
hydrate(App, document.getElementById("root"));

Instead it should be:

hydrate(<App />, document.getElementById("root"));

[chrstntdd]

Wow, I knew it had so be something small that I was overlooking.
Thank you for such a quick reply.

Cheers!