[Bug] HMR doesn't work with Storybook 6.5.0

[allozaur]

What version of vite are you using?

2.9.9

System info and storybook versions

System:
OS: macOS 12.3.1
CPU: Intel i7
Binaries:
Node: 16.10.0
npm: 7.24.0
Browsers:
Firefox Developer Edition 101.0b8 (64-bit)
Chrome 101.0.4951.64

Describe the Bug

1. To even be able to use @storybookjs/builder-vite i had to install @storybookjs/addon-svelte-csf. It didn't want to work without it (and i didn't have any .svelte stories yet.
2. After installing @storybookjs/addon-svelte-csf (had to do it forcefully as there were some dependency conflicts @storybookjs/builder-vite stopped throwing errors.
3. Running npm run storybook seems to just show the latest build ran with Webpack. When changing the stories' contents, no there is no active HMR.
4. Furthermore, if i remove .sveltekit and node_modules and then run

npm i
npm run storybook

i get this:

Attatching repo with this issue in ZIP

sveltekit-storybook-vite-builder.zip

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[smashercosmo]

Yeah, I'm experiencing the same behaviour. But for me it sometimes builds with vite and sometimes with webpack, but I haven't been able to find a pattern yet :)

[smashercosmo]

btw, does your preview-head.html file contain:

<script>
  window.global = window
</script>

this might fix the 'global is not defined' error

[IanVS]

But for me it sometimes builds with vite and sometimes with webpack

You may be seeing webpack output from the manager. Storybook will still use webpack to build it's own UI (the sidebar, buttons, addons panel, etc), but should consistently use vite for your preview, if you've configured it to use the vite builder.

[smashercosmo]

@IanVS ok, yeah, I think you're right
@allozaur seems like not working HMR is a known issue. HMR only works when you change components, not stories. It's mentioned in the docs https://github.com/storybookjs/builder-vite#known-issues

[IanVS]

That's true, @smashercosmo, but the files should still update. They just flash instead of a smooth HMR. I think the issue that @allozaur was having originally was that there was a cached build in node_modules/.cache from webpack. And you hit the nail on the head for his other issue with global. Another possibility is to force jest-mock 28 to be used as described here: storybookjs/storybook#15391 (comment)