svelte-headlessui icon indicating copy to clipboard operation
svelte-headlessui copied to clipboard

href attribute causes compiler error with component

Open Zamiell opened this issue 2 years ago • 5 comments

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

Zamiell avatar Aug 30 '22 19:08 Zamiell

For now, as a workaround, I just moved the tag outside of the component like this:

<a href="foo">
  <DisclosureButton />
</a>

Zamiell avatar Aug 30 '22 19:08 Zamiell

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.

rgossiaux avatar Aug 30 '22 20:08 rgossiaux

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.

rgossiaux avatar Aug 30 '22 20:08 rgossiaux

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

Zamiell avatar Aug 30 '22 20:08 Zamiell

@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.

bradyisom avatar Sep 01 '22 19:09 bradyisom