[Bug] ValidationError: <slot> cannot have directives

[fischor]

Describe the bug

I have Svelte components written in TypeScript, so I have to use svelte-preprocess. My storybook config looks like this:

const sveltePreprocess = require("svelte-preprocess")

module.exports = {
  svelteOptions: {
    preprocess: sveltePreprocess(),
  },
  stories: ["../../../components/svelte/*.stories.js", "../../../components/svelte/*.stories.svelte"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-actions",
    "@storybook/addon-svelte-csf"
  ],
};

Steps to reproduce the behavior

With that config run storybook.

Expected behavior

Successful build.

Screenshots and/or logs

ModuleBuildError: Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ValidationError: <slot> cannot have directives (14:28)
12:
13: {#if render}
14:   <slot args={context.args} {...context.args}/>
                                ^
15: {/if}
16:
    at /Users/.../node_modules/svelte-loader/index.js:181:12
    at /Users/.../node_modules/@storybook/svelte/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/.../node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/.../node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/rtf/Github/mycom/mono/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/.../node_modules/svelte-loader/index.js:181:3
ModuleBuildError: Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ValidationError: <slot> cannot have directives (23:28)
21:
22: {#if render}
23:   <slot args={context.args} {...context.args}/>
                                ^
24: {/if}
25:
    at /Users/.../node_modules/svelte-loader/index.js:181:12
    at /Users/.../node_modules/@storybook/svelte/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/.../node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/.../node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/../node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/.../node_modules/svelte-loader/index.js:181:3

Environment

• NPM version:

 "@storybook/addon-actions": "^6.2",
   "@storybook/addon-svelte-csf": "^1.0.0",
   "@storybook/svelte": "^6.2",

Additional context

The error is referring to these lines

addon-svelte-csf/src/components/Story.svelte

Lines 22 to 24 in 1c88870

	{#if render}
	<slot args={context.args} {...context.args}/>
	{/if}

[j3rem1e]

Do you have a repo to reproduce it ?

[j3rem1e]

It's look like you are compiling internals svelte component into webcomponents. if it's really what you are doing, then it is not supported.

[fischor]

No, I am not creating web components.

While creating the repro, I noticed I was on an older, not supported svelte version. I was using svelte@3.29.7, however svelte svelte@^3.32.0 is required via peer dependencies. Upgrading svelte resolved the issue.
If you want to investigate that further, here is the repro: https://github.com/fischor/issue-22-storybookjs-addon-svelte-csf There are 3 commit that use different versions of svelte. The issue happens only in the second commit (svelte version too old).

[j3rem1e]

You're right. Spread properties on slot have been added in v3.30 through sveltejs/svelte#5456

It's so natural I forgot it wasn't here at the beginning 😆