如何解决Storybook中「默认导出缺少组件注释无法渲染故事」的报错？

错误原因分析 #

你遇到的报错核心有两个问题：

1. 组件导入方式不匹配：你的Button.jsx用的是默认导出（export default function Button），但Button.stories.js里用了命名导入（import { Button } from './Button'），这会导致Button变量为undefined，Storybook无法识别到正确的组件，所以提示"组件注解缺失"。
2. 故事参数格式错误：Primary故事只定义了title，但Storybook需要通过args来传递组件的props，否则无法正确渲染组件。

修正后的代码 #

Button.stories.js #

import Button from './Button'; // 改成默认导入

export default {
  component: Button,
};

export const Primary = {
  args: { // 用args传递组件props
    title: "Primary"
  }
};

验证修改 #

重启Storybook服务后，应该就能正常渲染Primary按钮故事了。如果还有问题，可以检查：

• 确认组件文件路径是否正确
• 确保Storybook版本和React版本兼容（比如Storybook 7+适配React 18）

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