HTMLButtonElement is not defined on svelte-kit SSR

[jangxyz]

Describe the bug
When using the Tabs component, I get a ReferenceError: HTMLButtonElement is not defined error.
This happens when the two conditions meet:

1. Set Tab#as prop to something besides "button".
2. Renders the page in SvelteKit ssr mode.

Setting ssr: false in hooks.js (see svelte-kit doc on hooks) can avoid this problem, but there should be a fundamental solution.

Seems like HTMLButtonElement is not defined in ssr mode, and the code is only reached if as is not "button" (default value):

svelte-headlessui/src/lib/utils/resolve-button-type.ts

Lines 2 to 12 in a6c6a8e

	export function resolveButtonType(
	props: { type?: string; as?: SupportedAs },
	ref: HTMLElement | null | undefined
	): string | undefined {
	if (props.type) return props.type;
	let tag = props.as ?? "button";
	if (typeof tag === "string" && tag.toLowerCase() === "button")
	return "button";
	if (ref instanceof HTMLButtonElement) return "button";
	return undefined;
	}

To Reproduce

Here's a repo with a fresh svelte-kit starter with basic Tabs demo. (index.svelte#L8-19)

<TabGroup>
  <TabList>
    <Tab as="div">Tab 1</Tab>
    <Tab as="div">Tab 2</Tab>
    <Tab as="div">Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Content 1</TabPanel>
    <TabPanel>Content 2</TabPanel>
    <TabPanel>Content 3</TabPanel>
  </TabPanels>
</TabGroup>

Library version

Using [email protected]

[rgossiaux]

Ah interesting, thanks for the great report! Sorry you ran into this. I just published a fix as 1.0.1 on npm.

[jangxyz]

Confirmed :D
What a simple fix! Thanks!