Help wanted: Vite + Svelte HMR is not working properly when making changes to stories

[vudoan1708-cyber]

Describe the bug
We are working on Storybook integration with Vite and Svelte to improve the developer experience in our company. Everything was so good and we are super appreciative of your work in integrating Vite builder into Storybook.
However, the fun didn't last very long until we realised HMR doesn't work properly with Storybook files. Although, there was probably a fix for this issue already, it is pretty React-specific at the moment, Svelte is still suffering from this unfortunately.

Dependencies

"@storybook/addon-actions": "^6.4.13",  
"@storybook/addon-docs": "^6.4.13",
"@storybook/addon-essentials": "^6.4.13",
"@storybook/addon-links": "^6.4.13",
"@storybook/addon-svelte-csf": "^1.1.0",
"@storybook/svelte": "^6.4.13",
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
"storybook-builder-vite": "^0.1.13"

And a simple configuration in main.cjs

module.exports = {
  core: {
    builder: "storybook-builder-vite"
  },
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-svelte-csf"
  ],
  framework: "@storybook/svelte",
  svelteOptions: {
    preprocess: require("svelte-preprocess")()
  },
}

Any help would be very appreciated.
Thanks.

[IanVS]

Hi, can you explain what you mean by HMR not working properly with storybook files? To my knowledge, the current situation with all of the frameworks is that changes to stories themselves trigger a full page reload, but that changes to the components being rendered in the stories should HMR correctly. Is that not what you are experiencing?

[vudoan1708-cyber]

Hi Ian!
Apologies for not understanding how HMR works.

Basically, changes made to the components are rendered properly. But no reflection whatsoever, when changes are made to the stories files themselves.

[vudoan1708-cyber]

Hi Ian!

It's me again. Please do we know how to solve this issue and an approximation of the delivery of the fixes, if possible?
Thanks.

[IanVS]

Hi, as far as I know, none of the current maintainers are svelte users. Hopefully someone with some experience will be able to step in and help out. Because of that, I can't provide a timeline, I'm afraid.

[vudoan1708-cyber]

Thanks a lot for the info, I think we can live with the problem for now until the fixes are delivered.

An additional note here too, I know very well that the next issue is not relevant to this one at all but just gonna throw it here real quick since it is Svelte-related (I think).

The .vite cached directory is always be emptied everytime changes are made to the dependencies or the configuration (not sure if this is the expected behaviour), but then the real problem is when (as in the attached img) vite builder is attempting to searching for those source mapping files in the directory and results in warnings.

Although, this is not a major problem since it doesn't throw an exception and the page can be reloaded again after those files are auto-generated, it defeats the idea of vite's fast bundling time, since the file auto-generation does take sometime.

Please could you have a look at this as well?
Thanks.

[IanVS]

@vudoan1708-cyber, mostly I've seen these errors when you don't have all of your dependencies pre-bundled by vite, and it has to restart after adding more. You'll notice a line like [vite] new dependencies found: if that's the case. You'll want to add those dependencies to your viteFinal's optimizeDeps.include, while being careful to keep the ones that are already in the config to begin with. There are a few examples in other issues if you search for that.

Also, make sure you're on the latest version of this project, as we now add stories as optimizeDeps.entries, to limit the number of dependencies that you need to specify in the include array. Please let me know if that helps your errors above.

[vudoan1708-cyber]

Thanks. That seems to have solved the warnings now.

[IanVS]

@vudoan1708-cyber, some fixes for svelte were just released. Would you like to try out https://github.com/eirslett/storybook-builder-vite/releases/tag/v0.1.16 to see if hot reloading is improved for you?

[vudoan1708-cyber]

@vudoan1708-cyber, some fixes for svelte were just released. Would you like to try out https://github.com/eirslett/storybook-builder-vite/releases/tag/v0.1.16 to see if hot reloading is improved for you?

Hi Ian!
Yes, this does seem to be working fine now.
There is actually another bug I found but I will open that as a separate issue.

For this one, nicely done and thank you very much for the works.

[IanVS]

Great! Thanks for reporting back.

[vudoan1708-cyber]

@IanVS With the latest version 0.1.23 of storybook-builder-vite, getting everything started seems to be really fast and smooth now. However, changes to the code, not just to the stories files, don't reflect on the page anymore. In fact, as I manually refreshed the page, no changes appear either.
This is the error that I got.

Any help will be appreciated.
Thanks.

[IanVS]

@vudoan1708-cyber the package name changed, and there are newer versions. Can you try running npx sb@next automigrate and see if that helps?

[vudoan1708-cyber]

@IanVS Yes, that fixed the Not Found error, but now the HMR is not working for the stories files again and manually refreshing the page sometimes, takes a really long time for storybook to render.