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

(7 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)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
Issue 種別: 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.