[Bug] Didn't find xyz in CSF file, this is unexpected error

[mcmxcdev]

Describe the bug

I am just trying to get started with this addon to be able to write stories in .svelte format.

Unfortunately, this is what I encounter when I try to view the stories I have just created:

Expected behavior

Story should render as expected

Environment

• OS: Ubuntu 23.04
• Node.js version: v18.17.1
• NPM version: pnpm 8.6.10
• Browser (if applicable): Brave
• Browser version (if applicable): Version 1.56.20 Chromium: 115.0.5790.171 (Official Build) (64-bit)
• Device (if applicable): Desktop

Additional context

Story looks like this:

<script lang="ts">
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
  import Space from '$lib/components/ui/Space.svelte'
</script>

<Meta title="Actions/Space" component={Space} />

<Template let:args>
  <Space {...args} />
</Template>

<Story name="Horizontal" />

<Story name="Vertical" />

Config is as follows:

import type { StorybookConfig } from '@storybook/sveltekit'

const config: StorybookConfig = {
  stories: [
    {
      directory: '../src/stories/**',
      files: '*.stories.@(ts|svelte)',
      titlePrefix: 'Design System',
    },
  ],
  addons: [
    '@storybook/addon-interactions',
    '@storybook/addon-links',
    '@storybook/addon-a11y',
    '@storybook/addon-svelte-csf',
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: true,
      },
    },
    {
      name: '@storybook/addon-styling',
      options: {},
    },
  ],
  framework: {
    name: '@storybook/sveltekit',
    options: {},
  },
  docs: {
    autodocs: false,
  },
  core: { disableTelemetry: true },
}

export default config

[megan-starr9]

For added context, I'm seeing the same thing happen. This is my setup:

Story looks like this:

<script lang="ts">
  import { Meta, Story } from "@storybook/addon-svelte-csf";
  import Breadcrumbs from './Breadcrumbs.svelte';
  import Crumb from './Crumb.svelte';

  const tags = ['autodocs'];
  const argTypes = {
  };
  const args = {
  };
</script>

<Meta component={Breadcrumbs} {tags} {argTypes} {args} />

<Story name="Default" >
  <Breadcrumbs>
    <Crumb>Item 1</Crumb>
    <Crumb>Item 2</Crumb>
  </Breadcrumbs>
</Story>

<Story name="With Links" >
  <Breadcrumbs>
      <Crumb><a href="/">Link 1</a></Crumb>
      <Crumb><a href="/">Link 2</a></Crumb>
      <Crumb><a href="/">Link 3</a></Crumb>
      <Crumb><a href="/">Link 4</a></Crumb>
    </Breadcrumbs>
</Story>

And config looks like this:

import type { StorybookConfig } from "@storybook/sveltekit";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-svelte-csf",
  ],
  framework: '@storybook/sveltekit',
  docs: {
    autodocs: "tag",
  }
};
export default config;

When I view my stories, I am seeing the following messages:

It looks like you aren't setting a default for the name if the meta value isn't provided. Might or might not be related, but something I noticed that felt worth calling out

[JReinhold]

@mcmxcdev @megan-starr9 which version of Storybook and the addon are you using? Can you link to a reproduction?

[mcmxcdev]

@JReinhold I added a minimal reproduction for you to review in: https://github.com/mcmxcdev/storybookjs-addon-svelte-csf-120

It doesn't seem relevant which storybook and addon version is in use, I tried with older ones and with latest, they break nonetheless.

[mcmxcdev]

@JReinhold did you have a look at the repro yet? It completely blocks us from using stories written in Svelte.

[JReinhold]

So there are two related issues at play here.

1. autotitle isn't supported

Plain CSF automatically generates the title from the filename, however that is not supported in this addon yet, so as @megan-starr9 nicely pointed out the title attribute on Meta like <Meta title="My Title" /> is required.
Adding a title to your repro @mcmxcdev fixes the issue.

2. titlePrefix is ignored

Your original issue @mcmxcdev does have a title though, but in that case the problem is that you're using the advanced story specifier with a titlePrefix, and there's a bug here where that is sometimes ignored. This means that the story ID that is generated on the server doesn't match the one that is generated on the client.

Unfortunately the only workaround for this is to remove the titlePrefix until this is fixed, which means you have to add the prefix manually to the story files.

At least this should unblock you for now.

[mcmxcdev]

Good findings, thank you!

Are there open feature requests / bug tickets I can follow along with for both issues?

[JReinhold]

There is not! I created two issues for this: #129 #130. Closing in favor of those.