storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.7k stars 9.33k forks source link

[Bug]: Backgrounds toolbar addon causes multiple rerenders and errors when switching backgrounds on a docs page with over 4 stories #29007

Open merri-dei opened 2 months ago

merri-dei commented 2 months ago

Describe the bug

When switching to another background via the backgrounds toolbar addon on a docs page with over 4 stories, the docs page rerenders and reloads multiple times and the ff errors are thrown as shown on the console: image

manager  received storyRenderPhaseChanged but was unable to determine the source of the event
manager  received storyRendered but was unable to determine the source of the event
manager  received storybook/docs/snippet-rendered but was unable to determine the source of the event

Reproduction link

https://github.com/merri-dei/storybook-nextjs-issue/tree/main

Reproduction steps

  1. Go to the above link.
  2. Clone the repository.
  3. Open the repository in an IDE.
  4. Install all dependencies via pnpm install.
  5. Run npm run storybook.
  6. Visit http://localhost:6006.
  7. Open the Button docs page.
  8. Change the background via the Backgrounds toolbar addon. You might need to do this multiple times to see the errors on the console.

Expected: The docs page rerenders once to update the background of the stoires and doesn't reload. No error is logged onto the console.

Actual: The docs page rerenders multiple times and reloads. Errors are logged onto the console:

https://github.com/user-attachments/assets/13ce6e61-c1e5-42dd-b977-15b64518c42f

Note that this doesn't happen on docs pages with 4 stories or less:

https://github.com/user-attachments/assets/3fb03824-55db-4bf3-8f71-eb601c9c9100

System

Storybook Environment Info:

  System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v18.19.0/bin/pnpm <----- active
  Browsers:
    Chrome: 128.0.6613.113
    Edge: 128.0.2739.42
    Safari: 17.6
  npmPackages:
    @storybook/addon-console: ^3.0.0 => 3.0.0 
    @storybook/addon-essentials: ^8.2.9 => 8.2.9 
    @storybook/addon-interactions: ^8.2.9 => 8.2.9 
    @storybook/addon-links: ^8.2.9 => 8.2.9 
    @storybook/addon-onboarding: ^8.2.9 => 8.2.9 
    @storybook/blocks: ^8.2.9 => 8.2.9 
    @storybook/nextjs: ^8.2.9 => 8.2.9 
    @storybook/react: ^8.2.9 => 8.2.9 
    @storybook/test: ^8.2.9 => 8.2.9 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.2.9 => 8.2.9

Additional context

No response

DonnyVerduijn commented 1 month ago

I can confirm this is happening in 8.3.5 with multiple stories in a doc page, but not with a single one, although the story is still remounted.