Can't get Dialog to work with Sveltekit

[chanmathew]

Hey there, thanks for your effort on making this port! Having some issues getting it working properly on Sveltekit.

Issue

When importing the Dialog component, it seems to break the page, here's the error:

Cannot read properties of undefined (reading 'default')
TypeError: Cannot read properties of undefined (reading 'default')
    at eval (/src/routes/(app)/trips/[tripId]/places/+page.svelte:55:101)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1876:22)
    at Object.default (root.svelte:44:40)
    at Object.left (/src/routes/(app)/trips/[tripId]/+layout@.svelte:57:43)
    at SplitLayout.svelte:17:52
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1876:22)
    at eval (/src/routes/(app)/trips/[tripId]/+layout@.svelte:51:99)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1876:22)
    at Object.default (root.svelte:43:39)
    at eval (/src/routes/+layout.svelte:28:41)

How to reproduce

1. Copy and pasted the example Dialog code into a +page.svelte
2. Component will render on initial save, but as soon as you refresh the page it will break and show error above in server logs

Version info

"svelte": "^3.54.0", "@sveltejs/kit": "^1.0.0", "svelte-headlessui": "^0.0.11",

Side note: What do you recommend when trying to wrap this into a custom component and passing in the toggle function and content?

[CaptainCodeman]

I'm not able to reproduce that, the example code is pretty much what's used in the lib project routes for use while working on the components, and refreshing that dialog page worked fine. I noticed in the error there's mention of some other components (like SplitLayout.svelte plus layout files) so it's possible it's something todo with them or things in combination.

If you can create a reproduction on stackblitz or similar I'll have a look into it.

[CaptainCodeman]

Side note: What do you recommend when trying to wrap this into a custom component and passing in the toggle function and content?

If you pass in a boolean as a prop to control the open / closed state, you could have a reactive statement to call the .open() and .close() methods on the dialog if you want to control it externally

Titles and content could be set by using named and default slots.

[chanmathew]

I'm not able to reproduce that, the example code is pretty much what's used in the lib project routes for use while working on the components, and refreshing that dialog page worked fine. I noticed in the error there's mention of some other components (like SplitLayout.svelte plus layout files) so it's possible it's something todo with them or things in combination.

If you can create a reproduction on stackblitz or similar I'll have a look into it.

@CaptainCodeman Here's a repo: https://stackblitz.com/edit/svelte-kit-ns7hph?file=src/routes/+page.svelte

I'm also getting the same error with the Listbox element too.

[CaptainCodeman]

Did you install svelte-transition? That's published as a separate package but used in those examples. It worked when I added it.

  "dependencies": {
    "svelte-headlessui": "^0.0.11",
    "svelte-transition": "^0.0.7"
  }

[chanmathew]

@CaptainCodeman Doh! That's what it is, seems to be working now, thanks! 🙏

[CaptainCodeman]

No worries, it's not really a great or particularly informative error message. It didn't remind me that I've done exactly the same thing more than once! 🤣