Storybook中使用@storybook/addon-essentials时为什么某些面板显示空白？ 一柯言 提问于 2026-02-11 20:58:23 阅读 39 工具 我在React项目里配置Storybook后，按照文档引入了@storybook/addon-essentials，但Docs面板和A11y检查这些组件始终显示空白区域。已经确认在main.js里添加了 addons: ['@storybook/addon-essentials/register'], ，也尝试过删除.node_modules重新安装，重启Storybook还是没效果，这是配置顺序问题吗？ 我来解答 赞 4 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 W″瑞瑞 Lv1 你这个应该是配置方式错了，@storybook/addon-essentials 现在不需要手动 register。你现在用的写法是老版本的，现在新版直接加包名就行。 把 main.js 里的 addons: ['@storybook/addon-essentials/register'] 改成 addons: ['@storybook/addon-essentials'] 就行了。 另外确认一下 package.json 里装的是正确版本： npm install --save-dev @storybook/addon-essentials 然后检查 .storybook/main.js 最基本结构是不是对的： module.exports = { stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-essentials'], }; 还有个坑是如果你用了自定义 webpack 配置，可能把默认的 rule 给覆盖了，导致 mdx 或 docgen 解析失败，这时候 Docs 面板就会空。可以先注释掉 webpack config 看看能不能恢复。 数据库层面倒是不涉及这事儿，纯前端构建链路的问题。我之前也被这个 register 后缀坑过一次，文档更新了但很多老教程没删干净。 回复 点赞 6 2026-02-11 21:01 加载更多 相关推荐
把 main.js 里的
addons: ['@storybook/addon-essentials/register']改成addons: ['@storybook/addon-essentials']就行了。另外确认一下 package.json 里装的是正确版本：
然后检查 .storybook/main.js 最基本结构是不是对的：
还有个坑是如果你用了自定义 webpack 配置，可能把默认的 rule 给覆盖了，导致 mdx 或 docgen 解析失败，这时候 Docs 面板就会空。可以先注释掉 webpack config 看看能不能恢复。
数据库层面倒是不涉及这事儿，纯前端构建链路的问题。我之前也被这个 register 后缀坑过一次，文档更新了但很多老教程没删干净。