sv create with storybook fails from fresh minimal install

[cristianvogel]

 Welcome to the Svelte CLI! (v0.6.5)
│
◇  Where would you like your project to be created?
│  ./
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  prettier, eslint, storybook
│
◇  Which package manager do you want to install dependencies with?
│  npm
│
◇  storybook: Running external command (npx storybook@latest init --skip-install --no-dev)

npm run storybook

Then on an example button, I change the colour. Storybook says, do you want to save changes?

I say , yes (please)

It says

SyntaxError: Unexpected token, expected "}" (8:9)```

And a pop up says 'did not save, unknown error' 

[benmccann]

What version of Node.js are you using?

[cristianvogel]

v20.13.1

I tried the above setup at least 3 times with same result.

tried:
Chrome Version 131.0.6778.86 (Official Build) (arm64)

[manuel3108]

Can confirm, this also happens on node v22.11.0

Here is the full stack trace:

Error writing to .\src\stories\Button.stories.svelte:
SyntaxError: Unexpected token, expected "}" (8:9)
    at constructor (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:14251:15)
    at Wl.raise (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:16508:54)
    at Wl.unexpected (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:16525:18)
    at Wl.expect (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:16789:27)
    at Wl.jsxParseExpressionContainer (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:18853:75)
    at Wl.jsxParseElementAt (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:18894:122)       
    at Wl.jsxParseElement (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:18915:32)
    at Wl.parseExprAtom (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:18924:37)
    at Wl.parseExprSubscripts (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:21426:78)      
    at Wl.parseUpdate (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:21416:45)

And the relevant code:

import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
import { fn } from '@storybook/test';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const { Story } = defineMeta({
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
    },
  },
  args: {
    onClick: fn(),
  }
});

Don't know how that tool is counting the lines, but looks like line 8 does not contain any }. Maybe it's referencing line 7?

Pinging @JReinhold. If you want me to create an issue, please let me know!

[JReinhold]

Thanks for the report. This is unrelated to the sv command, it's a Storybook limitation. I'm sorry this affects the maintainers here, please keep pinging me on stuff like this @manuel3108 🙏

I've opened an issue here where I explain what's going on: storybookjs/addon-svelte-csf#240

Feel free to close this one.

[cristianvogel]

I'm completely new to Storybook, so pressing that save button was almost my first interaction! How do we save changes then, without a Save button?

[JReinhold]

I'm completely new to Storybook, so pressing that save button was almost my first interaction! How do we save changes then, without a Save button?

@cristianvogel those changes in Controls are "saved" as args on a story in the stories.svelte file. When you want to edit the args of a story, or create a new story with other args, you simply modify the story definitions in the file.

See docs here: https://storybook.js.org/docs/writing-stories/args - remember to pick Svelte in the frameworks picker in the top.

Feel free to DM me on Discord (Svelte or Storybook servers), I'm JReinhold 👋