storybookjs/storybook

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

Ouverte

#29 007 ouverte le 30 août 2024

 (4 commentaires) (1 réaction) (0 personne assignée)TypeScript (10 058 forks)batch import
addon: backgroundsaddon: docsbughelp wantedsev:S3

Métriques du dépôt

Stars
 (89 909 étoiles)
Métriques de merge PR
 (Merge moyen 7j 22h) (184 PRs mergées en 30 j)

Description

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

Guide contributeur