storybookjs/storybook

[Bug]: @storybook/react-vite framework changes in MUI theme file are not reflected in hot reload

Open

#25996 opened on Feb 12, 2024

View on GitHub
 (2 comments) (1 reaction) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugbuilder-vitehelp wantedmuireactsev:S3

Description

Describe the bug

When use @storybook/react-vite framework and I have used themes from MUI in storybook components, while making changes in the theme file, the changes are not reflected in hot reload. I have investigated and the problem is the files that are created in node_modules/.cache/sb-vite/deps I have tried to make the cache disable but I have not been able to fix this problem.

When I delete node_modules/.cache/sb-vite/deps manually and restart the change appears in storybook

To Reproduce

No response

System

System:
    OS: macOS 13.6
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.1 - /opt/homebrew/bin/node
    npm: 9.8.0 - /opt/homebrew/bin/npm <----- active
  Browsers:
    Chrome: 121.0.6167.160
    Safari: 16.6

Additional context

I'm using this packages of Storybook:

"@storybook/builder-vite": "^7.4.2", "@storybook/client-api": "^7.4.2", "@storybook/addon-actions": "^7.4.2", "@storybook/addon-essentials": "^7.4.2", "@storybook/addon-links": "^7.4.2", "@storybook/addon-styling": "^1.3.7", "@storybook/addons": "^7.4.2", "@storybook/mdx1-csf": "^1.0.0", "@storybook/react": "^7.4.2", "@storybook/cli": "^7.4.2", "@storybook/react-vite": "^7.4.2",

main.js file:

module.exports = { stories: [ "src//*.stories.mdx", "src//*.stories.@(js|jsx|ts|tsx)" ], docs: { autodocs: true }, addons: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-styling", "@storybook/mdx1-csf" ], features: { buildStoriesJson: true, legacyMdx1: true }, framework: { name: "@storybook/react-vite", options: {} }, };

Contributor guide

Tech stack
reactvitenodejstypescript
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.
1-3 hours
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.
mostly clear
Prerequisites
basic knowledge of Storybookfamiliarity with Vite
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
The issue is that changes to MUI theme files are not reflected in hot reload due to Vite's dependency pre bundling cache stored in `node modules/.cache/sb vite/deps`. To investigate, start by understanding how `@storybook/react vite` configures Vite's `optimizeDeps` and whether theme files are correctly excluded from caching. Check the Storybook source code for the builder vite plugin, particularly files in `builders/builder vite/src/plugins`. Also review Vite's documentation on dependency pre bundling and HMR invalidation. The fix likely involves ensuring that theme files are either not pre bundled or that the cache is invalidated on theme file changes.