search

rgossiaux / svelte-headlessui

Unofficial Svelte port of the Headless UI component library
https://svelte-headlessui.goss.io
MIT License
1.78k stars 96 forks source link

HTMLButtonElement is not defined on svelte-kit SSR #94

Closed jangxyz closed 2 years ago

jangxyz commented 2 years ago

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):

https://github.com/rgossiaux/svelte-headlessui/blob/a6c6a8ed238c3fead92982af2215a39e9b7ce3e0/src/lib/utils/resolve-button-type.ts#L2-L12

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 svelte-headlessui@1.0.0

rgossiaux commented 2 years ago

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

jangxyz commented 2 years ago

Confirmed :D What a simple fix! Thanks!