ListBox example not working.

[edanisko]

pnpm create svelte@latest listbox # y to ts, n to the rest
cd listbox
pnpm i
pnpm i svelte-headlessui
pnpx svelte-add @latest tailwindcss
pnpm i 

goto Docs - Listbox

Copy Paste Example Code gist

Paste into /src/routes/+page.svelte

pnpm run dev

Error

[plugin:vite:import-analysis] Failed to resolve import "svelte-transition" from "src/routes/+page.svelte". Does the file exist?
39 |  const { console: console_1 } = globals;
40 |  import { createListbox } from "svelte-headlessui";
41 |  import Transition from "svelte-transition";
   |                          ^
42 |  import Selector from "./Selector.svelte";
43 |  import Check from "./Check.svelte";

Ok So I fix that.

-       import Transition from 'svelte-transition'
+       import Transition from 'svelte/transition'

More Errors

    import Selector from './Selector.svelte'
    import Check from './Check.svelte'

These both do not exist: so I make the two files each with one word in there so svelte has something to load.

diff --git a/src/routes/Check.svelte b/src/routes/Check.svelte
index 4c04caa..cc10e34 100644
--- a/src/routes/Check.svelte
+++ b/src/routes/Check.svelte
@@ -1 +1 @@
-check
\ No newline at end of file
+Check
\ No newline at end of file
diff --git a/src/routes/Selector.svelte b/src/routes/Selector.svelte
index 728f0f8..3d44d7b 100644
--- a/src/routes/Selector.svelte
+++ b/src/routes/Selector.svelte
@@ -1 +1 @@
-Selector
\ No newline at end of file
+Selector

Error:

Error: <Transition> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <Transition>.

And then i gave up.

[CaptainCodeman]

Sorry for the confusion - svelte-transition is actually published as a separate package (it was created before HeadlessUI).

https://www.npmjs.com/package/svelte-transition

Not sure if it should be a peer dependency or not, as it isn't really a dependency per-se, it's just needed if the component markup you create happens to use it.

But it should definitely be more obvious / a note in the docs.

[edanisko]

Thanks for the fast response. Got it working.

[CaptainCodeman]

Thanks, I created a TODO for myself:

https://github.com/CaptainCodeman/svelte-headlessui/issues/43