svelte-headlessui
svelte-headlessui copied to clipboard
href attribute causes compiler error with component
Getting an error with the latest version of SvelteKit:
<script lang="ts">
import { DisclosureButton } from "@rgossiaux/svelte-headlessui";
</script>
<DisclosureButton as="a" href="foo" />
Type '{ as: "a"; href: string; }' is not assignable to type 'IntrinsicAttributes & Omit<TRenderProps<{ open: boolean; close: (focusableElement: HTMLElement | null) => void; }, "a", "button">, TInternalProps | ... 2 more ... | "unmount"> & { ...; } & { ...; }'.
Property 'href' does not exist on type 'IntrinsicAttributes & Omit<TRenderProps<{ open: boolean; close: (focusableElement: HTMLElement | null) => void; }, "a", "button">, TInternalProps | ... 2 more ... | "unmount"> & { ...; } & { ...; }'.
This error is confusing, as I'm pretty sure this code has been working just fine until recently.
Library version 1.0.2
For now, as a workaround, I just moved the tag outside of the component like this:
<a href="foo">
<DisclosureButton />
</a>
Thanks for the report. I've been busy lately but I'll have to look into this when I'm free next week--it sounds concerning.
What version of svelte2tsx
are you using (ideally what versions before+after the breakage)? It'll be in package-lock.json as a dependency. It sounds like something could have changed in a release there that broke something in the typing in this library.
From a very quick look, it looks like they've been reworking some of the typescript definitions recently (I found https://github.com/sveltejs/language-tools/pull/1606 for example) and that might be responsible. It also looks like the 0.5.15 version was missing a file that has been corrected in 0.5.16, in case that happens to be causing this.
What version of svelte2tsx are you using (ideally what versions before+after the breakage)?
I tried doing git checkout [sha1 from last week]
, and then yarn
, and then reloading vscode, but I still got the error. So I don't really know how to revert to a before-breakage-state.
For reference, this is my yarn.lock from last week: https://github.com/Zamiell/isaac-streaking/blob/b1b03d787508a21c89a6cce58387ab63e3981636/yarn.lock
@rgossiaux, I upgraded to [email protected], which I believe has the missing file fix you referenced above. However, I am still getting errors for href
and id
attributes on MenuItem
and MenuButton
components. So, the issue is probably related to the reworked typescript definitions.