[Bug]: storybookStoreV6 does not work with Suspense · storybookjs/storybook#23190

(7 留言) (0 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import

bughelp wantedreact

描述

Describe the bug

When using a "suspense decorator" with a v6 storybook store, I recieve this error in the 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

Which I have finally narrowed down to using a storybook store of v6.

To Reproduce

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

System

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

Additional context

The only reason we still use storybook store v6 is I think because Chromatic didn't support v7 at one point? I wonder if they've updated their support...

Looks like yes:

except now I'm running into Vite's problems with async CSS imports, so I'm fiddling with optimizeDeps to make sure my base styles don't override specific component styles.. (https://github.com/vitejs/vite/issues/3924)

貢獻者指南

技術棧: typescriptreactvite
領域: frontendtestingdeveloper experience
議題類型: bug
難度: 4
預計時間: 1-2 days
活動狀態: stale
清晰度: needs investigation
前置要求: Familiarity with StorybookUnderstanding of React SuspenseBasic knowledge of Vite
新手友善度: 20
研究方向: Start by reproducing the bug using the provided StackBlitz link (https://stackblitz.com/edit/github xgijrv d6etea?file=.storybook%2Fmain.ts). Examine the error stack trace to identify the exact function causing the TypeError. The issue mentions that using a 'suspense decorator' with v6 storybook store triggers the error. Investigate the storybookStoreV6 implementation in the Storybook codebase (likely in packages/store/src or similar) to understand how it interacts with decorators and Suspense. The comment about Chromatic support suggests that switching to storybookStoreV7 might resolve the issue, but the reporter encountered Vite CSS import problems. Therefore, also explore the interaction between Vite's optimizeDeps and async CSS imports as referenced in the Vite issue #3924. No linked PRs or maintainer responses were found in this issue.