描述bug
在从v6迁移到v7后,有时在左侧面板中展开新部分时会出现错误:
按下F5键重新加载故事,一切都正常。在左侧面板中展开新部分,有时可以正常工作,有时仍然出现相同的错误...
这种情况只发生在生产模式下,使用storybook构建。开发模式下没有问题。
重现步骤
$ storybook build
@storybook/cli v7.0.0-beta.59
info => Cleaning outputDir: \storybook-static
info => Loading presets
info => Building manager..
info => Manager built (393 ms)
info => Compiling preview..
info => Copying static files: C:\Users\MattiasJ\git\xxx-ui-components\node_modules\storybook\node_modules\@storybook\manager\static at C:\Users\MattiasJ\git\xxx-ui-components\storybook-static\sb-common-assets
info => Using implicit CSS loaders
info => Using default Webpack5 setup
info => Copying static files: C:\Users\MattiasJ\git\xxx-ui-components\.storybook\public at C:\Users\MattiasJ\git\xxx-ui-components\storybook-static\
info => Preview built (14 s)
info => Output directory: C:\Users\MattiasJ\git\xxx-ui-components\storybook-static
启动本地Web服务器并导航到localhost。
导航到左侧面板中的各个部分以展开故事列表。似乎列表中的第一个故事(在展开时自动选择)没有被加载!?
系统信息
Environment Info:
System:
OS: Windows 10 10.0.22000
CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
Binaries:
Node: 18.14.1 - ~\.nvm\versions\node\v18.14.1\bin\node.EXE
Yarn: 1.22.19 - ~\git\node_modules\.bin\yarn.CMD
npm: 9.3.1 - ~\.nvm\versions\node\v18.14.1\bin\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (110.0.1587.56)
npmPackages:
@storybook/addon-actions: 7.0.0-beta.55 => 7.0.0-beta.55
@storybook/addon-controls: 7.0.0-beta.55 => 7.0.0-beta.55
@storybook/addons: 7.0.0-beta.55 => 7.0.0-beta.55
@storybook/cli: 7.0.0-beta.55 => 7.0.0-beta.55
@storybook/core: 6.5.16 => 6.5.16
@storybook/storybook-deployer: ^2.8.16 => 2.8.16
@storybook/theming: 7.0.0-beta.55 => 7.0.0-beta.55
@storybook/web-components: 7.0.0-beta.55 => 7.0.0-beta.55
@storybook/web-components-webpack5: ^7.0.0-beta.55 => 7.0.0-beta.59
其他上下文信息
module.exports = {
staticDirs: ['./public'],
stories: ['../stories/start.stories.@(js|jsx|ts|tsx)', '../stories/*/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-controls',
{
name: 'storybook-addon-turbo-build',
options: {
// Please refer below tables for available options
optimizationLevel: 3,
},
},
],
core: {
builder: 'webpack5',
disableTelemetry: true,
},
framework: {
name: '@storybook/web-components-webpack5',
options: {},
},
};
7条答案
按热度按时间cczfrluj1#
你有一个可以分享的复制品仓库吗?如果没有,你能创建一个吗?请查看 how to create a repro 。非常感谢!🙏
另外,当你移除
storybook-addon-turbo-build
时,问题是否会消失?i2byvkas2#
我们使用turbo-build来传递构建步骤。否则,压缩器会破坏内联css。例如:
不确定如何解决这个问题,但我会尝试一下...
hk8txs483#
现在没有使用storybook-addon-turbo-build进行构建。尽管如此,仍然存在相同的问题。
(现在使用的是7.0.0-beta.61版本)
aor9mmx14#
抱歉,问题已经解决了!我当时运行了一个指向旧输出文件夹的本地Web服务器。我可以确认storybook-addon-turbo-build是问题所在。关闭它可以解决问题,打开它又会再次出现问题!
ws51t4hk5#
你好!@shilman@MattiasJa,我在为autodocs构建故事书后遇到了相同的问题,你能看一下吗?如果有任何解决方案,请告诉我。#26944
提前感谢!
zaq34kh66#
你好!@shilman@MattiasJa,我在为autodocs构建故事书后遇到了相同的问题,你能看一下吗?如果有解决方案,请告诉我#26944
提前感谢
你好@hiren3897,我们通过移除turbo-build解决了这个问题。
我看到你使用了vite-builder,所以你的问题可能出在这个依赖上!?
elcex8rz7#
感谢@MattiasJa的回复。
是的,我想问题出在依赖上,我尝试移除所有插件,除了用于构建自动文档的addon-docs插件。这很奇怪,因为当我们在本地运行storybook时,一切都能正常渲染完整的文档,但是当我们使用vite-builder构建时,我们会得到一个错误,提示某些内容在使用init之前无法使用!
我在deps文件夹中,尝试查看它抛出错误的地方。