使用原生Svelte .svelte文件在Storybook中无法展示Story求助

需求 #

• 基于本地项目中的Grid、Row、Column组件，在Storybook中编写对应的Story
• 偏好使用Markdown格式的.stories文件，也接受.js/.svelte格式方案

当前编写的Grid.stories.svelte代码 #

<script>
  // @ts-ignore
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
  import Grid from "../Grid/Grid.svelte";
  import Row from "../Grid/Row.svelte";
  import Column from "../Grid/Column.svelte";
</script>

<Meta title="Grid" component={Grid} />

<Template let:args id="Default">
  <svelte:fragment slot="gridlayout">
    <Grid {...args}>
      <Row {...args}>
        <Column height="1" width="4">
          <header>
            <h2>Description</h2>
          </header>
          <hr />
          <p>
            <span class="bold">Svelte Grid Layout</span> is a tool that make it easier
            to create a page template for applications built with Svelte
          </p>
        </Column>
      </Row>
    </Grid>
  </svelte:fragment>
</Template>

<Story name="Default" template="Default" />

遇到的错误 #

Cannot process .svelte file with storyStoreV7: src/lib/storybook/Grid.stories.svelte

• Grid组件的Story无法正常展示

已尝试的无效方案 #

• 按照官方问题提示，在Storybook配置中禁用storyStoreV7并添加@storybook/addon-svelte-csf插件，操作后无效且影响其他插件正常工作
• 尝试Storybook Svelte文档中多组件Story的多种写法，均出现各类报错

配置信息 #

• Storybook: 6.5.9
• Svelte: 3.49.0

可行解决方案 #

方案1：改用.js格式编写Story（兼容storyStoreV7） #

6.5.x版本的storyStoreV7对.svelte格式Story支持存在兼容性问题，改用.js格式更稳定，代码示例：

import Grid from '../Grid/Grid.svelte';
import Row from '../Grid/Row.svelte';
import Column from '../Grid/Column.svelte';

export default {
  title: 'Grid',
  component: Grid,
  subcomponents: { Row, Column },
};

const Template = ({ ...args }) => ({
  Component: Grid,
  props: args,
  slots: {
    default: () => ({
      Component: Row,
      slots: {
        default: () => ({
          Component: Column,
          props: { height: '1', width: '4' },
          slots: {
            default: () => `
              <header>
                <h2>Description</h2>
              </header>
              <hr />
              <p>
                <span class="bold">Svelte Grid Layout</span> is a tool that makes it easier
                to create a page template for applications built with Svelte
              </p>
            `,
          },
        }),
      },
    }),
  },
});

export const Default = Template.bind({});
Default.args = {};

方案2：调整Storybook配置，正确适配.svelte格式Story #

如果坚持使用.svelte格式的Story，需确保配置正确：

1. 修改.storybook/main.js配置：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-svelte-csf'
  ],
  features: {
    storyStoreV7: false,
  },
};

2. 安装与Storybook版本匹配的插件：

npm install @storybook/addon-svelte-csf@6.5.9 --save-dev

3. 清除缓存并重启Storybook：

npx storybook dev --no-manager-cache

方案3：升级Storybook到稳定版本 #

6.5.9属于较旧版本，storyStoreV7的兼容性问题在后续版本中已修复。可以升级到7.x版本（Svelte 3.x兼容Storybook 7.x），升级后无需额外配置即可正常使用.svelte格式的Story。

内容的提问来源于stack exchange，提问作者Alex Libby