With Nextjs Error: Objects are not valid as a child. Encountered an object with the keys {}

[mmdHasan-yazdanPanah]

I got this error on the last-release(5.2.5), I am working with Nextjs and entirely using SSG and ISR.
The error only appears on development(which all SSG becomes SSR) and no error on the build.
I am using preact/compat with type-aliasing method.

Solution: downgrade to ver 5.2.2

[marvinhagemeister]

Thanks for reaching out. Can you share more information so that we can reproduce the issue on our end? The error will be thrown when an invalid element is passed as a jsx node.

[lfre]

@marvinhagemeister I opened this issue in next-plugin-preact preactjs/next-plugin-preact#65 with a repro. As far as I could narrow it down, the issue is due to setting esmExternals: false in next.config.js, which is required to solve other issues linked there and gets activated when interpolating variables. E.g: <div>My {name}</div>.

I hope that helps! https://github.com/lfre/preact-render-to-string-issue

[mmdHasan-yazdanPanah]

Yes, exactly the same for me.

[mcous]

I'm encountering this issue in a project built with Vite. Haven't nailed down a minimal reproduction yet, but I am using SSG via vite-plugin-ssr and not messing with any of vite's "externals" settings.

v5.2.3 is the latest "good" version, anything later than that I get Objects are not valid as a child. The "objects" in question appear to be numbers and strings in the source code.

[marvinhagemeister]

Took a look into this and the reason we throw this error is that we recently added all the missing option hooks in preact-render-to-string. This enabled signal subscriptions and preact/debug now to work as expected. There is one thing that we didn't account for and that is that right now we don't materialize a text vnode for strings.

// input
const vnode = <p>{"foo"}</p>

// preact-render-to-string
const vnode = {
  type: "p"
  _k: [
    "foo"
  ]
}

// preact in browser
const vnode = {
  type: "p",
  _k: [
    { type: null, props: "foo", ... }
  ],
}

The check in preact/debug doesn't check the vnode that gets passed to options.diffed directly, but rather what's in the children array.