[7.0] Vite storybook crashes when first opened

[IanVS]

Describe the bug

When first opening storybook, an error is shown:

Uncaught (in promise) Error: Cannot call renderSelection before initialization
    at PreviewWeb.renderSelection (PreviewWeb.js:246:29)
    at PreviewWeb.onSetCurrentStory (PreviewWeb.js:193:10)
    at index.mjs:3:959
    at Array.forEach (<anonymous>)
    at r.handleEvent (index.mjs:3:945)
    at PostmsgTransport.<anonymous> (index.mjs:3:78)
    at PostmsgTransport.handler (index.js:41:15)
    at PostmsgTransport.handleEvent (index.js:205:14)

Refreshing the page will work fine. It seems to only happen if there's no ?path= in the url.

To Reproduce
This can be seen in the react-vite/default-js sandbox, or after creating a fresh vite storybook project.

System

Environment Info:

  System:
    OS: macOS 12.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.16.0 - ~/.volta/tools/image/node/16.16.0/bin/node
    Yarn: 1.22.19 - ~/.volta/bin/yarn
    npm: 8.15.0 - ~/.volta/tools/image/npm/8.15.0/bin/npm
  Browsers:
    Firefox: 104.0
    Safari: 15.6
  npmPackages:
    @storybook/addon-a11y: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/addon-actions: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/addon-docs: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/addon-essentials: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/addon-interactions: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/addon-links: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/addon-postcss: ^3.0.0-alpha.1 => 3.0.0-alpha.1
    @storybook/addons: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/builder-vite: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/expect: ^27.5.2-0 => 27.5.2-0
    @storybook/jest: ^0.0.10 => 0.0.10
    @storybook/react-vite: ^7.0.0-alpha.25 => 7.0.0-alpha.25
    @storybook/test-runner: ^0.7.0-next.0 => 0.7.0-next.0
    @storybook/testing-library: ^0.0.14-next.0 => 0.0.14-next.0
    @storybook/testing-react: ^1.3.0 => 1.3.0

[tmeasday]

Ok, I understand the problem. I'll explain it here, as I suspect you'll be interested @IanVS.

The problem is that during the bootup process, two things happen:

1. The preview "selects the specified story" (ie maps id=* to a specific story)
2. That triggers renderSelection with that selection directly (this is the part of PreviewWeb that renders a story to the UI).
3. It also emits a STORY_SPECIFIED event which reaches the manager and prompts it to select the right story in the sidebar
4. That has the side effect of triggering the SET_CURRENT_STORY even that would tell the preview to render the story.

However, the preview is already in the process of rendering the story due to 2. Usually it has already finished and 4. is seen as a no-op. However if the story in 2. is "preparing" still (i.e. calling import()), we need some special code to handle this. We added some code to do that in the past (see #17599) but that only worked in story mode, not docs mode.

I guess for whatever reason this timing was never an issue in docs mode for webpack 🤷. Definitely an important issue to fix!

[IanVS]

Thanks a ton for figuring this out and explaining it!

[tmeasday]

Note also I was seeing a likely related bug when HMR-ing a component file and viewing it in story mode.

[IanVS]

I'm no longer able to reproduce this in alpha.27. I'll keep it open for a few more days in case it comes back or anyone else experiences it.

[tmeasday]

I saw it again in the sandbox after we spoke @IanVS so I definitely want to keep digging!

[IanVS]

I just saw Error: Cannot render docs before preparing in an alpha.28 project, FWIW.

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.29 containing PR #19071 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.