[Bug]:将 @storybook/components 导入到 mdx 页面会导致在 Storybook 8 中渲染失败,

qjp7pelc 于 4个月前发布在其他

关注(0)|答案(5)|浏览(49)

描述bug

在升级到storybook@8之后，从@storybook/components导入组件的我的mdx文档页面由于以下错误而停止渲染：

从@storybook/components加载一个不导入任何内容的页面是正常的。
有趣的事实是，这些错误之前会有一个关于@emotion/react包多个示例的警告。

重现设置了最新的Yarn(4.2.2),这是我生产storybook的一个非常最小的提取版本，其中也发生了这个错误，阻止我迁移到版本8。在Storybook 7.6.19中，这些错误不会发生。

重现链接

https://github.com/fmal/storybook-8-bug-repro

重现步骤

克隆上面的仓库
运行yarn install
运行yarn storybook
打开http://localhost:6006/?path=/docs/example-broken-page--docs,将出现以下错误：
Cannot read properties of undefined (reading 'size')
打开http://localhost:6006/?path=/docs/example-introduction--docs,它应该显示，尽管控制台会显示多个示例的@emotion/react警告

系统

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.asdf/installs/nodejs/20.11.0/bin/node
    Yarn: 4.2.2 - ~/.asdf/installs/nodejs/20.11.0/bin/yarn <----- active
    npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 125.0.6422.77
    Safari: 15.6.1

附加上下文

storybook

来源：https://github.com/storybookjs/storybook/issues/27371

5条答案

按热度按时间

afdcj2ne1#

@storybookjs/core 这看起来像是主题提供程序的问题。从我所了解的情况来看，所有包的版本都是正确的，而且文档页面被 Package 在一个有效的 ThemeProvider 中，所以我真的不知道这里发生了什么。有什么想法吗？

赞(0）回复(0）举报 4个月前

vuktfyat2#

这似乎是某种webpack/yarn捆绑包问题。@shilman,我可以看到@storybook/components出现在两个不同的块中，具体尝试搜索这个"../.yarn/__virtual__/@storybook-components-virtual-a8967408c7/4/.yarn/berry/cache/@storybook-components-npm-8.1.3-da5969b1b0-10.zip/node_modules/@storybook/components/dist/index.mjs",它会出现在这两个文件中：