Storybook 不会加载简单的组件答案

【问题标题】：Storybook Won't Load Simple ComponentStorybook 不会加载简单的组件
【发布时间】：2020-04-23 16:53:39
【问题描述】：

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

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

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

export default { title: 'Button' };

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

而按钮只有一行：

<button>Hello</button>

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

【问题讨论】：

如果您只是想测试 Svelte 开发，那么为什么不使用 Svelte REPL (svelte.dev/repl)？这是一种快速测试构建基本组件的方法，无需安装 NodeJ 和在本地构建 Svelte 应用程序所需的一切。 Svelte 网站应该真正向新用户解释他们可以保存他们的 Svelte REPL 应用程序（我保存了一个我在这里工作的应用程序：svelte.dev/repl/253ddd578806497b8b54c339490f8221）。无论如何，这是一种在线测试 Svelte 开发的简单方法。
这里提供了一些关于如何使用 Svelte REPL 的说明：svelte.dev/repl/2c06d586d890466e8dc7da6fb111efb7

标签： svelte storybook svelte-component

【解决方案1】：

我已经解决了，在这里为以后可能遇到同样问题的人发布答案。

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

所以不要这样：

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

我应该这样做：

import Button from './Button.svelte';

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

【讨论】：