Help wanted: Svelte example seems not working

[andrew-secret]

It seems like that the svelte example is not working. Here are the steps to reproduce the error.
Can you verify this behaviour?

Install vite with svelte tempalte

npm init @vitejs/app example-svelte-vite-and-storybook -- --template svelte

Install dependencies

npm install

Install storybook with next dist-tag

npx sb@next init --builder storybook-builder-vite

Run storybook dev server

npm run storybook

Error Message

Unexpected default export without title: undefined

node_modules/@storybook/core-client/dist/esm/preview/loadCsf.js/loadStories2/</<@http://localhost:6006/@fs/Users/andre/src/github/dev/yetanotherblog/example-svelte-vite-and-storybook/node_modules/storybook-builder-vite/node_modules/.vite/chunk-7UV63S5J.js?v=7d8abd40:985:19
node_modules/@storybook/core-client/dist/esm/preview/loadCsf.js/loadStories2/<@http://localhost:6006/@fs/Users/andre/src/github/dev/yetanotherblog/example-svelte-vite-and-storybook/node_modules/storybook-builder-vite/node_modules/.vite/chunk-7UV63S5J.js?v=7d8abd40:980:15
node_modules/@storybook/client-api/dist/esm/config_api.js/ConfigApi2/this.configure@http://localhost:6006/@fs/Users/andre/src/github/dev/yetanotherblog/example-svelte-vite-and-storybook/node_modules/storybook-builder-vite/node_modules/.vite/chunk-WMD4FMNA.js?v=7d8abd40:3455:11
node_modules/@storybook/core-client/dist/esm/preview/loadCsf.js/loadCsf2/<@http://localhost:6006/@fs/Users/andre/src/github/dev/yetanotherblog/example-svelte-vite-and-storybook/node_modules/storybook-builder-vite/node_modules/.vite/chunk-7UV63S5J.js?v=7d8abd40:1079:19
configure2@http://localhost:6006/@fs/Users/andre/src/github/dev/yetanotherblog/example-svelte-vite-and-storybook/node_modules/storybook-builder-vite/node_modules/.vite/@storybook_svelte.js?v=7d8abd40:235:10
@http://localhost:6006/virtual:/@storybook/builder-vite/vite-app.js:65:14

Do you have any pointers for me regarding this error? Or maybe I'm just holding it wrong 🤷‍♂️

Thank you so much for building this! Can't wait to finally use it with Svelte 🧡

[eirslett]

I'm not sure why this happens - I only use React myself and I have never used Svelte, so I'm not quite sure how to fix it. But I'm of course open for PRs!

[memark]

I can reproduce this.

(Although the --template svelte argument doesn't seem to work. I still need to select both framework and js variant in the interactive CLI.)

[andrew-secret]

I'm trying to wrap my head around this problem, but I have no clue where I should even start debugging this error. Maybe someone with expert knowledge in Storybook can tell us more about it?

I just have a slight guess that the problem comes from the @storybook/addon-svelte-csf pacakge.

[TheComputerM]

Maybe found the bug...
addon-svelte-csf works by analyzing the ast of the *.stories.svelte and then extracting the data from it.
So I made some changes to this file

...
if (node.source.value === '@storybook/addon-svelte-csf') {
console.log(node)
...

So using webpack 4 the console output is:

  type: 'ImportDeclaration',
  start: 11,
  end: 79,
  loc: { start: { line: 2, column: 2 }, end: { line: 2, column: 70 } },
  specifiers: [
    {
      type: 'ImportSpecifier',
      start: 20,
      end: 24,
      loc: [Object],
      imported: [Object],
      local: [Object]
    },
    {
      type: 'ImportSpecifier',
      start: 26,
      end: 34,
      loc: [Object],
      imported: [Object],
      local: [Object]
    },
    {
      type: 'ImportSpecifier',
      start: 36,
      end: 41,
      loc: [Object],
      imported: [Object],
      local: [Object]
    }
  ],
  source: {
    type: 'Literal',
    start: 49,
    end: 78,
    loc: { start: [Object], end: [Object] },
    value: '@storybook/addon-svelte-csf',
    raw: '"@storybook/addon-svelte-csf"'
  }
}

but using vite builder there is not output whatsoever.

[TheComputerM]

The CSF addon only works on webpack due to this

[TheComputerM]

I will fix this issue if anyone provides an esm version of addon-svelte-csf.

[TheComputerM]

Hey, I got it working but there is a problem...
due to this

alias: { 
               vue: 'vue/dist/vue.esm-bundler.js',
                '@storybook/addon-svelte-csf':  '@storybook/addon-svelte-csf/dist/preset/index.js',            
},

SO in a story file:
this

import { Meta, Template, Story } from "@storybook/addon-svelte-csf";

is converted into this

import { Meta, Template, Story } from "@storybook/addon-svelte-csf/dist/preset/index.js";

which is not supposed to happen, instead it is supposed to follow the module key in package.json which is @storybook/addon-svelte-csf/dist/esm/index.js

[TheComputerM]

Turns out you can remove that alias.

[TheComputerM]

PR Fix: #25