Regression: preact useId() does not work since @astrojs/preact@3.1.0

[smnbbrv]

Astro Info

Astro                    v4.2.1
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/preact

If this issue only occurs in one browser, which browser is a problem?

Chrome (others I guess too)

Describe the Bug

Using useId() throws the following error:

TypeError: Cannot read properties of undefined (reading '__m')
at Module.V (file:///home/projects/withastro-astro-vob6us/node_modules/preact/hooks/dist/hooks.mjs:27:2104)
at b.Preact (/home/projects/withastro-astro-vob6us/src/components/Preact.tsx:9:36)
at e (file:///home/projects/withastro-astro-vob6us/node_modules/preact-ssr-prepass/dist/index.mjs:16:1319)
at Module.s (file:///home/projects/withastro-astro-vob6us/node_modules/preact-ssr-prepass/dist/index.mjs:16:1517)
at Object.renderToStaticMarkup (/home/projects/withastro-astro-vob6us/node_modules/@astrojs/preact/dist/server.js:67:38)
at renderFrameworkComponent (/home/projects/withastro-astro-vob6us/node_modules/astro/dist/runtime/server/render/component.js:184:68)
at async Module.renderComponent (/home/projects/withastro-astro-vob6us/node_modules/astro/dist/runtime/server/render/component.js:369:10)

What's the expected result?

Properly working useId as in ~3.0.0

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-vob6us

Participation

• I am willing to submit a pull request for this issue.

[ktym4a]

I place here the results of my brief research.

If I just change this (back to before #9524)

astro/packages/integrations/preact/src/server.ts

Lines 81 to 94 in bcc504d

	const vNode: VNode<any> = h(
	Component,
	newProps,
	children != null
	? h(StaticHtml, {
	hydrate: shouldHydrate(metadata),
	value: children,
	})
	: children
	);
	await prepass(vNode);
	const html = render(vNode);
	return { attrs, html };

to this and run it, it works correctly.

astro/packages/integrations/preact/src/server.ts

Lines 75 to 90 in a171c22

	const html = render(
	h(
	Component,
	newProps,
	children != null
	? h(StaticHtml, {
	hydrate: shouldHydrate(metadata),
	value: children,
	})
	: children
	) as VNode<any>
	);
	return {
	attrs,
	html,
	};

---

if I add catch, errors are not displayed on the client side in dev mode.

await prepass(vNode).catch((err) => {});

But after do HMR on the client side then reload, error displayed on the client side.

this error is from const html = render(vNode); I think.

try {
    const html = render(vNode);
    return { attrs, html };
} catch (err) {
    console.log(err);
}

and error messages is like this.

Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 119840,
  [Symbol(trigger_async_id_symbol)]: 119825,
  [Symbol(kResourceStore)]: IncomingMessage {
    ...
  }
}

I've been wanting to contribute about this isssue, but I feel like preact-ssr-prepass is the cause and now I don't know what I can do.

[natemoo-re]

Thanks for looking into it @ktym4a! I think you're correct that preact-ssr-prepass is the cause. We might need to open an issue on their repository and/or get some help from the Preact team on this.

[rstacruz]

Thanks for opening this as an issue in the preact-ssr-prepass repo, too! preactjs/preact-ssr-prepass#60

[rschristian]

This was just fixed & is available in preact-ssr-prepass@1.2.2