Help wanted: make HMR work with Vite + Storybook

Describe the bug

I’m working on Storybook integration with Vite, which is a sought-after feature to increase community/mainstream adoption of Vite. The only problem remaining is that HMR doesn’t work properly with Storybook stories: https://github.com/eirslett/storybook-builder-vite/issues/3

HMR is very hard to understand, and I’m not quite sure if the problem is on Storybook’s end, Vite’s end, or a combination of both. Does anybody here have enough knowledge about HMR to be able to help out and track down the problem? This is really the only big “blocker” until Storybook is ready to use with Vite!

Reproduction

npm init @vitejs/app vite-react-app --template react && cd vite-react-app
npm install # or yarn
npx sb@next init --builder storybook-builder-vite && npm run storybook

Try making changes to e.g. “Button.stories.tsx” and observe that the story is not hot-updated properly in the browser. When making changes to “Button.tsx”, the HMR works as expected.

Issue Analytics

State:
Created 2 years ago
Reactions:11
Comments:9 (5 by maintainers)

Top GitHub Comments

8reactions

jrmyiocommented, Jun 15, 2021

I patched node_modules/@vitejs/plugin-react-refresh/index.js manually by adding

if (id.endsWith('.stories.tsx')) {
    return
}

However, what is really needed imo, is options that give a user more control on what files to skip or be marked as a react component. For example a ignore / skip property inside @vitejs/plugin-react-fresh that takes a function. If that function returns true then react-refresh should not do its thing and one can fallback to:

// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement
if (import.meta && import.meta.hot) {
    import.meta.hot.accept();
}

higher up in the react tree.

3reactions

dejourcommented, Jun 13, 2021

after more digging, i found the reason why it doesn’t work. after edit a file (either Button.stories.tsx or Button.tsx), it will trigger react refresh to update page, but it will only look through subset region of the page to update the edited component. the region is shown as following image: 截屏2021-06-14上午2 22 17