[Bug] Basic button story for Svelte 4 and Storybook 8 fails

[cge-taal]

Describe the bug

Following the basic button story example, gives the following error:

TypeError: Cannot destructure property 'story' of 'o' as it is undefined.
    at normalizeStory (http://localhost:6006/sb-preview/runtime.js:7110:62)
    at http://localhost:6006/sb-preview/runtime.js:7180:15
    at Array.forEach (<anonymous>)
    at processCSFFile (http://localhost:6006/sb-preview/runtime.js:7178:25)
    at li.memoizerific [as processCSFFileWithCache] (http://localhost:6006/sb-preview/runtime.js:127:95)
    at li.loadCSFFileByStoryId (http://localhost:6006/sb-preview/runtime.js:7832:17)
    at async li.loadStory (http://localhost:6006/sb-preview/runtime.js:7861:13)
    at async http://localhost:6006/sb-preview/runtime.js:8146:20
    at async pi.runPhase (http://localhost:6006/sb-preview/runtime.js:8139:94)
    at async pi.prepare (http://localhost:6006/sb-preview/runtime.js:8145:9)

Steps to reproduce the behavior

Try the example above with the following stack

• svelte : 4.2.18
• storybook : 8.2.1
• @storybook/addon-svelte-csf : 4.1.4

Using framework '@storybook/sveltekit' (in main.ts)

I'm basically trying to find the best Storybook experience for Svelte 4, with <slot/> support.

Does this plugin support Storybook 8 already?

Is this plugin still necessary for Storybook 8 and Svelte 4, with <slot/> support ?

Any links to the best working examples would be much appreciated.

[JReinhold]

I'm unable to reproduce the reported behavior. Copying the example from the readme works fine with the versions you've listed (all the latest at the time of writing). I had to fix the syntax error with onClick, but other than that it worked fine.

Could you provide a minimal reproduction in a repository? See https://storybook.js.org/docs/contribute/how-to-reproduce

[cge-taal]

Hi @JReinhold , thank you very much for taking a look. I would normally have offered a small reproducible example from the outset, but thought maybe referring to the official example (which I thought I followed verbatim) would be enough. That said, I'm glad to learn it is working for others and would love to get to the bottom of the issue.

So this morning, I just started on creating a small example - keeping detailed notes of my steps

pnpm dlx create-turbo@latest -e with-svelte test-sveltekit-storybook # choose pnpm
cd test-sveltekit-storybook/packages/ui
pnpm dlx storybook init  # choose Vite

Already on the 3rd line I'm getting a new error (it seems version 8.2.2 of Storybook was released since yesterday). Please see the attached output. Shall I make a new ticket for that?
storybook-init-error.txt

I'm on these tool versions

• pnpm -v : 9.4.0
• node -v : v20.14.0

[cge-taal]

I've created a repo for the above here: https://github.com/cge-taal/test-sveltekit-storybook

It contains literally only the files generated with

pnpm dlx create-turbo@latest -e with-svelte test-sveltekit-storybook # choose pnpm

..with the addition of a .gitignore file.

After a fresh clone, if I now try

cd test-sveltekit-storybook/packages/ui
pnpm dlx storybook init  # choose Vite

I get a different error: storybook-init-error.txt

Summarised in the readme

[kristianmandrup]

Works for me with the following recipe.

Create a SvelteKit 2 app using Typescript and Svelte 4 with all available integrations (ie. prettier, eslint, playwright, vitest, )

npm create svelte@latest my-svelte-kit-app
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

create-svelte version 6.3.8

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└  Your project is ready!

Install more integrations with:
  npx svelte-add

Next steps:
  1: cd my-svelte-kit-app
  2: npm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

Enter the newly created app

cd my-svelte-kit-app

Install dependencies

npm i
npm WARN deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported

added 260 packages, and audited 261 packages in 23s

68 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Install storybook

npx storybook@latest init
╭──────────────────────────────────────────────────────╮
│                                                      │
│   Adding Storybook version 8.2.9 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...


up to date, audited 261 packages in 643ms

68 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 • Adding Storybook support to your "SvelteKit" app
  ✔ Getting the correct version of 10 packages
    Configuring eslint-plugin-storybook in your package.json
  ✔ Installing Storybook dependencies
. ✓
Installing dependencies...

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN   dev eslint@"^9.0.0" from the root project
npm WARN   9 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
npm WARN node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils
npm WARN   @typescript-eslint/utils@"^5.62.0" from [email protected]
npm WARN   node_modules/eslint-plugin-storybook
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN   peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
npm WARN   node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils
npm WARN     @typescript-eslint/utils@"^5.62.0" from [email protected]
npm WARN     node_modules/eslint-plugin-storybook

up to date, audited 804 packages in 961ms

185 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   Storybook was successfully installed in your project! 🎉                   │
│   To run Storybook manually, run npm run storybook. CTRL+C to stop.          │
│                                                                              │
│   Wanna know more about Storybook? Check out https://storybook.js.org/       │
│   Having trouble or want to chat? Join us at https://discord.gg/storybook/   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Running Storybook

> [email protected] storybook
> storybook dev -p 6006 --quiet

storybook v8.2.9

info => Starting manager..
info => Starting preview..
The following Vite config options will be overridden by SvelteKit:
  - base
Forced re-optimization of dependencies
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
21.24.10 [vite] ✨ new dependencies optimized: @storybook/blocks
21.24.10 [vite] ✨ optimized dependencies changed. reloading

Storybook loads and everything looks fine.

I then added the https://storybook.js.org/addons/@storybook/addon-svelte-csf

npm install --save-dev @storybook/addon-svelte-csf

I added the Button example (adding the missing onClick handler function)

<script>
    export let rounded = true;

    function onClick() {
        console.log('hello')
    }
  </script>
  
  <style>
    .rounded {
      border-radius: 35px;
    }
  
    button {
      border: 3px solid;
      padding: 10px 20px;
      background-color: white;
      outline: none;
    }
  </style>
  
  <button class="button" class:rounded on:click={onClick}>
    <slot />
  </button>

And then the stories

<script context="module">
    import Button from './Button.svelte';
  
    export const meta = {
      title: "Button",
      component: Button
    }
  </script>
  
  <script>
    import { Story, Template } from '@storybook/addon-svelte-csf';
  
    let count = 0;
    function handleClick() {
      count += 1;
    }
  </script>
  
  <Template let:args>
    <!--👇 'on:click' allows to forward event to addon-actions  -->
    <Button {...args} 
      on:click
      on:click={handleClick}>
      You clicked: {count}
    </Button>
  </Template>
  
  <Story name="Rounded" args={{rounded: true}}/>
  
  <Story name="Square" source args={{rounded: false}}/>
  
  <!-- Dynamic snippet should be disabled for this story -->
  <Story name="Button No Args">
    <Button>Label</Button>
  </Story>

The Storybook page hot reloads the changes and it works :)

[cge-taal]

Thanks a lot @kristianmandrup for the detailed example. I forgot to update the ticket here, but in my comment on another ticket ( storybookjs/storybook#28563 (comment) ) I describe how I got it to work in the turborepo context.

Btw, in your base button example, I think the idea is not to define the onClick handler there, but instead have

<button class="button" class:rounded on:click>
  <slot />
</button>

That way, when you click on the button the on:click is forwarded in a way where Storybook picks it up and displays it in the Actions tab.

Great to have it working for Svelte!