[Storybook 6.4] HMR is ignored when making changes in preview.js

[yannbf]

Describe the bug

Title is descriptive, and here's a video for more context:

Screenshare.-.2022-03-19.11_13_08.AM.mp4

This is the error:

To Reproduce
1 - sb repro for CRA or any other
2 - run Storybook
3 - make changes in preview.js

[tmeasday]

@yannbf in SSv6, we do force a full reload when you make a change to preview.js.

In official Storybook, I see:

and the page reloads. That looks like that's not what's happening here?

[tmeasday]

Looks like this is an issue with webpack 5, not sure there's much we can do (beyond push people to ssv7): webpack-contrib/webpack-hot-middleware#390

@yannbf to confirm this was a WP5 project (you mention CRA)?

[rikkit]

I am also experiencing this issue, non-CRA app, plain Storybook with Yarn 2 Pnp and Webpack 5. I think it's fair to say hot reload is pretty core to the Storybook dev experience so any alternative setups are welcome...

@tmeasday What's ssv7?

Edit: using the resolution specified here helps a bit - the preview reloads on change, which is not so bad for now. webpack-contrib/webpack-hot-middleware#390 (comment)

[tmeasday]

@rikkit, sorry, the storyStoreV7 feature.

Edit: using the resolution specified here helps a bit - the preview reloads on change, which is not so bad for now. webpack-contrib/webpack-hot-middleware#390 (comment)

That's the correct behaviour in the v6 version of the story store. For various boring technical reasons we need to reload the browser if you change preview.js; this is a limitation we removed in the v7 store.

[jrmyio]

I get the same issue with @storybook/builder-vite and storyStoreV7 enabled. Vite starts refetching (instead of HMR) all dependencies when any of the dependencies that are used in preview.tsx are edited.

For example, when using a StyledComponents theme (provided by ThemeProvider inside the preview.tsx), the entire preview refreshes when I change the provided theme.

[tmeasday]

@jrmyio I'm not totally sure about the Vite builder. @IanVS - is it expected to do a full refresh on preview.tsx changes (even with Story Store v7`)?

[IanVS]

I do see that as well, now that I look. I've been fiddling with it a bit, and I can get HMR to work, but I'm not happy with the solution so far. I'll put up a PR in the next day or two and see if I can get some help from @joshwooding.

[codebutler]

I'm also using the vite builder, storyStoreV7, and have to manually refresh the browser after changing the theme (in my case using chakra-ui).

@IanVS Can you please share your workaround for this issue? Thanks.

[tmeasday]

@codebutler this issue is fixed in SB7 (HMR on preview.js in vite).

[IanVS]

I've closed this because I believe the issue is fixed in both webpack and vite in Storybook 7. If someone is still having problems with the latest version of Storybook, please let us know.