[7.0] Incompatible with sveltekit

Describe the bug A standard bootstrap of a sveltekit + storybook project fails to start.

To Reproduce

• yarn create svelte
• follow the prompts, choose skeleton for the template and no for everything else
• yarn
• npx sb@future init
• yarn storybook

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/ianvs/code/experiments/sveltekit-generator/node_modules/@sveltejs/adapter-auto/package.json

It seems like this happens because of a require call here: https://github.com/storybookjs/storybook/blob/b42f0edea70f4f97d1d64aa86945f3beeff2a7b7/code/lib/core-common/src/utils/interpret-require.ts#L24

But sveltekit is ESM-only. I tried changing the generated .storybook/main.cjs file into esm, but that still didn’t help.

System N/A

Additional context I’ve requested a way to specify all sveltekit options via command line flags, so that we can create a repro template for sveltekit and add it to our test suite: https://github.com/sveltejs/kit/issues/7064

[JReinhold]

I’ll do a follow up PR that removes the SvelteKit Vite plugin.

Are there particular features you’re thinking of? If you don’t build the SvelteKit generated code such as the route handlers, I’m not sure you’re left with much…

I think it’s mainly importing the SvelteKit specific modules. I agree most of them don’t make sense in a deep component that you’d have in a Storybook story, eg. @sveltejs/kit/hooks doesn’t make sense in a Storybook context. But I can see some of them make sense, eg.:

• $app/environment - As @Amerlander mentions should probably always be browser in SB
• Supporting any $lib/ imports - I’d guess is just a simple Vite alias.
• $app/paths - components showing the current URL or a path to an asset or whatever
• $app/stores - the page and the navigation stores could be useful for components that navigates.

But I think all of these should ideally be treated similar to props (or “args”), so users could “mock” them or define them as needed per story. Setting the current page for a given story, or making $app/navigation/goto call a Storybook action when called. I think all of this is out of scope for our SvelteKit support for now, but I think it would be the ideal DX for anyone or the community to build.

My hunch is that the biggest annoyance would be that we don’t support $lib/ imports, I can see that being used quite often in any component.

[Amerlander]

I agree with benmccann. But I can give some examples for SvelteKit-specific code I used in my components and had to change to use with Storybook. It were only about the SvelteKit specific $app/environment browser variable and $app/stores page store:

I have a menu component which uses the page store:

import { page } from '$app/stores'
$: active = $page.url.pathname;

I haven’t thought about a workaround yet, I just decided to not add this component to storybook for now.

And I had components which used the browser variable to prevent code from being ssr. Those components are already changed to not use browser anymore and I think that also improved the components. Also, I think the browser variable for example could be hard coded to be always true in storybook and then easily be used.

I would rather prefer to be able to build storybook than to have these sveltekit specific things available.