storybookjs/storybook

[Bug]: Decorator HMR does not re-render the story

Open

#20,869 opened on Feb 1, 2023

View on GitHub
 (3 comments) (7 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugbuilder-vitehelp wantedsev:S3

Description

Describe the bug

Setup

  • Storybook latest 7 beta across the board, with Vite as the builder
  • Chakra UI v2.4.9 plus related dependencies
    "@chakra-ui/react": "^2.4.9",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "framer-motion": "^8.5.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"

Expected behavior When we update a Chakra theme file, the decorator should hot-reload and apply the new styling to the story.

Observed behavior When we update the theme file, Vite hot-reloads the decorator but Storybook does not apply the changes. Vite log: 11:51:47 [vite] hmr update /.storybook/ThemeDecorator.tsx

Other notes This works fine if we do the same process within our actual application, but specifically doesn't work in Storybook.

To Reproduce

Reproduction repo: https://github.com/simon-poole/storybook-decorator-bug-demo

Key files:

  • src/stories/Button.theme.ts
  • src/theme.ts
  • .storybook/ThemeDecorator.tsx (referenced in preview.ts)
  • src/stories/Button.stories.ts

I haven't published a Chromatic or similar because the bug is with HMR, so wouldn't apply to a published site.

System

Environment Info:

  System:
    OS: macOS 13.2
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 9.1.1 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.38 => 7.0.0-beta.38
    @storybook/addon-interactions: ^7.0.0-beta.38 => 7.0.0-beta.38
    @storybook/addon-links: ^7.0.0-beta.38 => 7.0.0-beta.38
    @storybook/blocks: ^7.0.0-beta.38 => 7.0.0-beta.38
    @storybook/react: ^7.0.0-beta.38 => 7.0.0-beta.38
    @storybook/react-vite: ^7.0.0-beta.38 => 7.0.0-beta.38
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

Contributor guide

Tech stack
typescriptreactvite
Domain
frontendtooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Storybook basicsVite HMR
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate how Storybook handles HMR for decorators in the Vite builder. Compare the HMR update path for decorators versus regular story files. Look at the reproduction repo (https://github.com/simon poole/storybook decorator bug demo) and focus on the interaction between .storybook/ThemeDecorator.tsx and the preview.ts configuration. Check if the decorator module is being properly invalidated and re evaluated by Vite's HMR. Possibly the issue is that decorators are not included in the HMR boundary or are being cached incorrectly.