时间戳

首页 > 解决方案 > Storybook 不会加载简单的组件

svelte - Storybook 不会加载简单的组件

问题描述

我一直在尝试使用 Svelte 从主网站创建一个简单的 Storybook 示例。不幸的是，当我尝试启动 Storybook 时，它只会给我以下错误：

在此处输入图像描述

我为 Storybook 编写的代码故意非常简单：

import { MyButton } from './MyButton.svelte'

export default { title: 'Button' };

export const primary = () => ({
  Component: MyButton,
  data: { },
});

按钮只是一行：

<button>Hello</button>

我不确定这里可能出了什么问题，因为 Storybook 实例似乎期待组件返回（故事已经这样做了）。任何帮助将不胜感激！

标签： sveltestorybooksvelte-component

解决方案

我已经解决了，在这里为将来可能遇到相同问题的任何人发布答案。

问题在于Button组件的导入。因为 Svelte 不会对单个文件进行拆分导出（默认情况下它会导出整个文件），所以我还需要将导入定义为默认值。

所以代替这个：

import { Button } from './Button.svelte';

我应该这样做：

import Button from './Button.svelte';

从导入中删除对象爆炸括号。

推荐阅读