描述bug
设置
- Storybook 最新 7 beta,使用 Vite 作为构建器
- Chakra UI v2.4.9 以及相关依赖项
"@chakra-ui/react": "^2.4.9",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"framer-motion": "^8.5.5",
"react": "^18.2.0",
"react-dom": "^18.2.0"预期行为
当我们更新一个 Chakra 主题文件时，装饰器应该热重载并将新样式应用到故事中。
观察到的行为
当我们更新主题文件时，Vite 热重载了装饰器，但 Storybook 没有应用更改。
Vite 日志： 11:51:47 [vite] hmr update /.storybook/ThemeDecorator.tsx
其他注意事项
如果我们在实际应用程序中执行相同的过程，这可以正常工作，但在 Storybook 中具体不起作用。
重现问题
重现仓库： https://github.com/simon-poole/storybook-decorator-bug-demo
关键文件：
src/stories/Button.theme.tssrc/theme.ts.storybook/ThemeDecorator.tsx(在preview.ts中引用)src/stories/Button.stories.ts
由于 bug 与 HMR 有关，我没有发布 Chromatic 或类似的工具，因此不会应用于已发布的站点。
系统环境
Environment Info:
System:
OS: macOS 13.2
CPU: (8) arm64 Apple M1 Pro
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
npm: 9.1.1 - ~/.nvm/versions/node/v16.16.0/bin/npm
Browsers:
Chrome: 108.0.5359.124
Safari: 16.2
npmPackages:
@storybook/addon-essentials: ^7.0.0-beta.38 => 7.0.0-beta.38
@storybook/addon-interactions: ^7.0.0-beta.38 => 7.0.0-beta.38
@storybook/addon-links: ^7.0.0-beta.38 => 7.0.0-beta.38
@storybook/blocks: ^7.0.0-beta.38 => 7.0.0-beta.38
@storybook/react: ^7.0.0-beta.38 => 7.0.0-beta.38
@storybook/react-vite: ^7.0.0-beta.38 => 7.0.0-beta.38
@storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1其他上下文信息
- 无响应*
2条答案
按热度按时间oiopk7p51#
我正在使用
vite项目与vue和7.0.0-beta.48一起遇到相同的问题。Vite记录了HMR更新，但我必须重新加载才能在storybook中看到更改。这不仅在更改装饰器时发生，而且在更改业务代码时也发生。我认为目前HMR对我来说根本无法正常工作。如果需要，我可以提供一个复现示例。chhkpiq42#
我们还遇到了一个问题，那就是如果将MUI主题更改 Package 到全局装饰器中，它不会更新。无论是主题更改还是在React标签渲染之前插入随机文本，都不受影响。HMR实际上在我放入HMR-api的一些代码后运行良好：
所以看起来即使通过HMR更改了运行时storybook示例，它也不会更新全局装饰器。
不过我们找到了一个解决方法：如果我将与组件级装饰器相同的装饰器代码放在里面，它就可以完美工作，所以现在对我们来说是可以管理的。只是每个故事都不需要导入共享的Mui-theme-decorator并将其放入story export default ComponentMeta中，这是不必要的样板代码。
编辑：共享的组件级装饰器如果它是常量的话也无法正常工作，将其更改为函数调用可以解决问题。