[Bug] Type error `typeof Meta` when used with Svelte 3

[mcmxcdev]

Describe the bug

I am encountering TS issues with all imports from @storybook/addon-svelte-csf:

Argument of type 'typeof Meta' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'.
  Type 'typeof Meta' provides no match for the signature 'new (args: { target: any; props?: any; }): ATypedSvelteComponent'.

Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}

The exact same message with a different typeof is repeated for Template and Story imports.

Expected behavior

No TS issues

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

[zhyuhan]

Are you using Svelte 3? I'm using Svelte 3 in my SvelteKit project and also encountered the same type errors.

This might be an issue with new types in Svelte 4. I created a new SvelteKit project with Svelte 4 and no errors showed up.

[mcmxcdev]

I already feared that this would be the case, thanks for confirming it!

[mcmxcdev]

Fixed by upgrading to Svelte 4.

This dependency needs to drop Svelte 3 from it's peer dependencies here since it's misleading: https://github.com/storybookjs/addon-svelte-csf/blob/main/package.json#L98

[JReinhold]

@RSWilli seems like Svelte 4 did break our typing system after all - I'm not sure there's an easy fix here.

My suggestion would be to release a new major which only allows Svelte 4 as a peer dependency. Alongside that we could also release a new patch that that only allows Svelte 3 as a peer dependency, so we'd release two new versions that clearly defines the necessary dependencies. Thoughts?

[benmccann]

I believe this is fixed now. Please use version 3.0.10 of this plugin with Svelte 3 and version 4 of this plugin with Svelte 4