Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Comments:13 (6 by maintainers)

Top GitHub Comments

1reaction

vudoan1708-cybercommented, Feb 18, 2022

@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.

1reaction

vudoan1708-cybercommented, Jan 22, 2022

Thanks. That seems to have solved the warnings now.

Top Results From Across the Web

Help wanted: Vite + Svelte HMR is not working properly when ...

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

Server Options - Vite

Specify server port. Note if the port is already being used, Vite will automatically try the next available port so this may not...

Elder.js – An Opinionated, SEO Focused, Svelte Framework

For Vite the HMR on SvelteKit is better than Elder.js but SvelteKit doesn't offer Partial Hydration. The main difference is Elder.js is designed ......

Vite Svelte on build dynamic import don't work anymore

The import paths probably have to be known at build time for this to work correctly, i.e. the argument to import() has to...

Adding Vite to Your Existing Web App | CSS-Tricks

Now that the development server is running, try modifying your source code. The output should update almost immediately via Vite's HMR. This is ......