[Bug]: storybookStoreV6 与 Suspense 不兼容

tpgth1q7  于 5个月前  发布在  其他
关注(0)|答案(7)|浏览(50)

描述bug

在使用带有"suspense decorator"的v6 storybook store时,我在story中收到了这个错误:

TypeError: can't convert symbol to string
    Dv index.js:497
    io index.js:659
    y5 index.js:670
    nu index.js:709
    g6 config.mjs:19
    React 3
    g6 config.mjs:19
    jv config.mjs:20
    hookified runtime.js:7
    decorateStory runtime.js:34
    bindWithContext runtime.js:34
    wrapper chunk-DXNAW7Q2.mjs:7
    decorator runtime.js:104
    makeDecorator runtime.js:104
    hookified runtime.js:7
    decorateStory runtime.js:34
    bindWithContext runtime.js:34
    AB preview.mjs:19
    hookified runtime.js:7
    decorateStory runtime.js:34
    bindWithContext runtime.js:34
    EB preview.mjs:9
    hookified runtime.js:7
    decorateStory runtime.js:34
    bindWithContext runtime.js:34
    KB preview.mjs:6
    hookified runtime.js:7
    decorateStory runtime.js:34
    bindWithContext runtime.js:34
    i8 preview.mjs:401
    hookified runtime.js:7
    decorateStory runtime.js:34
    defaultDecorateStory runtime.js:34
    applyHooks runtime.js:7
    unboundStoryFn runtime.js:34
    React 7
    g scheduler.production.min.js:13
    Y scheduler.production.min.js:14
    EventHandlerNonNull* scheduler.production.min.js:14
    <anonymous> scheduler.production.min.js:19
react-dom.production.min.js:189:29

我终于将其缩小到使用v6的storybook store。

重现问题

https://stackblitz.com/edit/github-xgijrv-d6etea?file=.storybook%2Fmain.ts

系统环境

normally on macOS, but my repro works in stackblitz:

❯ npx storybook info

Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.1.0-alpha.38 => 7.1.0-alpha.38 
    @storybook/addon-interactions: ^7.1.0-alpha.38 => 7.1.0-alpha.38 
    @storybook/addon-links: ^7.1.0-alpha.38 => 7.1.0-alpha.38 
    @storybook/blocks: ^7.1.0-alpha.38 => 7.1.0-alpha.38 
    @storybook/react: ^7.1.0-alpha.38 => 7.1.0-alpha.38 
    @storybook/react-vite: ^7.1.0-alpha.38 => 7.1.0-alpha.38 
    @storybook/testing-library: ^0.2.0 => 0.2.0

附加背景信息

我们仍然使用v6 storybook store的唯一原因是我认为Chromatic在某个时候还没有支持v7?我想知道他们是否更新了他们的支持...
看起来是的:

  • 除了现在我遇到了Vite的异步CSS导入问题,所以我在努力解决optimizeDeps,以确保我的基本样式不会覆盖特定组件的样式。. ( vitejs/vite#3924 )
piztneat

piztneat1#

另一个有趣的React 18特性,例如#18258

jvlzgdj9

jvlzgdj92#

非常感谢你的汇报。鉴于它是遗留模式,并且产品的其他部分存在许多紧迫的问题,我不认为我们会优先考虑故事商店v6。但是也许有一个简单的解决方法(@tmeasday?)。我强烈建议你尽可能升级到SSv7,对于storiesOf用户,我们正在积极调查前进的道路:#23177

lnvxswe2

lnvxswe23#

遗憾的是,由于vitejs/vite#3924,我不认为我们可以从SSv6过渡过来,因为生产环境中的Vite构建中的异步CSS导入是错误的(顺序混乱)。
否则我很高兴升级💜

0vvn1miw

0vvn1miw4#

@jasikpark,你明白我们在v6模式下所做的操作导致了这个问题吗?
我认为我们仍然使用storybook store v6的唯一原因是Chromatic在某个时候没有支持v7。我想知道他们是否更新了他们的支持...
Chromatic确实支持v7,不用担心!
可惜的是,由于vitejs/vite#3924,我相信我们无法从SSv6过渡,因为生产Vite构建中的异步CSS导入是错误的(顺序混乱)。
@IanVS,我们是否为v7添加了急切加载功能来解决这个bug?我不记得了,我们最终是否发货了?

lsmd5eda

lsmd5eda5#

我将暂时探索如何不触发这个问题,也许可以通过不在我们的React查询使用中使用悬念来实现。你有关于急切加载的讨论链接吗?
尝试将Vite设置为捆绑单个捆绑包,但似乎不起作用。

jslywgbw

jslywgbw6#

我们是否在v7中添加了急切加载功能来解决这个bug?我不记得了,我们最终是否发布了它?
实际上,我和@IanVS一起在同一个故事书应用程序上工作——如果你们做了,我们从未尝试更新以尝试使用它。

a1o7rhls

a1o7rhls7#

不,我没有添加这个功能,它感觉很边缘化,所以我暂时让我们在v6商店上进行生产。我认为我们(Caleb和我)可能需要在某个时候放弃css模块以避免vite问题,因为我不认为它会被解决。

相关问题