Storybook 的 addon-docs 为啥不显示文档？

缤泽提问于 2026-03-18 09:55:31 阅读 57

工具

我装了 @storybook/addon-docs，也按官网配了 main.js 和 preview.js，但组件的 Docs 标签页一直是空的，啥也没渲染出来。

main.js 里加了 docs preset：

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-docs'
  ]
};

preview.js 也导出了参数：

export const parameters = { docs: { page: () =>


test

} };

连这个 test 都没显示，是不是哪里漏了？还是和 addon-essentials 冲突了？

我来解答赞 6 收藏

反馈

1 条解答

开发者光星 Lv1

问题找到了，你配置冲突了。

@storybook/addon-essentials 里面已经包含了 docs 功能，你又单独加了 @storybook/addon-docs，这俩一起用会出问题，Docs 页面直接就被干空了。

解决方案：

把 main.js 里的 @storybook/addon-docs 删掉，只保留 essentials：

module.exports = {

  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: [

    '@storybook/addon-essentials'

  ]

};

另外你 preview.js 里那个 test 变量根本没定义，当然显示不出来。如果你只是想测试 docs 能不能用，先把 preview.js 改成最简单的：

import { setCustomElementsManifest } from '@storybook/web-components';

import customElements from '../custom-elements.json';



setCustomElementsManifest(customElements);

或者如果你用的是 React 组件，stories 文件里直接写 docgen 注释就能自动生成文档了，不需要手动配置 preview.js。

删掉那个重复的 addon-docs，重启 storybook，Docs 页应该就出来了。

2026-03-18 11:23