[Bug]: HMR not working on SvelteKit and Storybook

[samhren]

Describe the bug

Hot module reload is not working with a fresh install of sveltekit and storybook.

To Reproduce

npm create svelte@latest .
npx sb@next init
npm run storybook

Make a change in src/stories/Button.svelte
Does not automatically update on localhost:6006
Remount component button also does not update it. Only page reload

System

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1105.0), Chromium (109.0.1518.78)
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/addon-interactions: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/addon-links: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/blocks: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/svelte: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/sveltekit: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

[samhren]

After looking into it more, updates to .stories.* files trigger hmr but not the .svelte file iteslf

[rohanrajpal]

Facing the same issue, has anyone figured any workaround until this is fixed? I shall post one too as soon as i find out

[rohanrajpal]

Just tried it out on a fresh sveltekit install instead of my big project, same issue. Also the HMR doesnt happen even if I edit the *.stories.ts file.

One thing to note is that the terminal correctly shows that the HMR is done, but the info does not reach the localhost & on checking the websocket messages, nothing is send, so issue is not in triggering, but in communicating, most probably.

[anim8rDev]

Just trying out storybook myself with Sveltekit. Was not an easy experience as a pnpm user. However, I finally got it going and am now running into this same issue. No updates reflected in the browser, while the terminal window is reflecting an hmr update. This is with a fresh barebones test project.

[samhren]

For anyone still looking at this I am using https://histoire.dev/ because it works very well for svelte/sveltekit. Will most likely go back to Storybook once out of beta.

[JReinhold]

I've investigated this, and concluded that the Vite plugin introduced in #20804 that ensures that SSR builds are always disabled, is causing this.

Creating a fresh SvelteKit+Storybook 7 project and only adding the following to the main.js config will make HMR work again:

viteFinal: async (config, { configType }) => {
	const plugins = await withoutVitePlugins(config.plugins, [
		"storybook:sveltekit-overrides",
	]);
	console.dir(plugins, { depth: 6 });
	return {
		...config,
		plugins,
	};
},

(removing all SvelteKit's plugins or replacing the SvelteKit plugin with the Svelte plugin didn't change anything)

I don't understand why that plugin has an impact at all on the dev server, since it should only have an effect when building static outputs. It might be something regarding the order in which Vite configs/plugins are applied, SvelteKit plugins being async and this one not.
Or is it because this plugin mutates the config instead of returning a new one without touching the existing?
It might also be something completely else.

I'll investigate further ASAP, but in the mean time if @IanVS or @benmccann have an idea on why this breaks it, I'd love to hear it.

[benmccann]

That's weird. I don't have any idea why it would cause an issue

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.56 containing PR #21290 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[JReinhold]

@samhren @anim8rDev @rohanrajpal this should be fixed in v7.0.0-beta.56, please let me know if it still doesn't work for you! ❤️

[rohanrajpal]

Thanks a lot! It's now working as expected.

[rohanrajpal]

I've started facing this issue again, anyone else facing it too? using 7.0.2

[JReinhold]

@rohanrajpal can you provide a minimal reproduction? I quickly tried to reproduce this in a fresh SvelteKit project, and it's working fine as far as I can tell.

[rohanrajpal]

@rohanrajpal can you provide a minimal reproduction? I quickly tried to reproduce this in a fresh SvelteKit project, and it's working fine as far as I can tell.

Hey @JReinhold, its working great on a fresh install, tho i finally found the issue

If i use https://houdinigraphql.com/, it involves setting upa houdini() plugin in the vite.config.ts, if that is enabled, HMR does not work. So currently i'm avoiding it this way

import { sveltekit } from '@sveltejs/kit/vite';
import houdini from 'houdini/vite';
import { defineConfig } from 'vite';
import { sentrySvelteKit } from '@sentry/sveltekit';

export default () => {
    return defineConfig({
        plugins: [
            ...[process.env['npm_lifecycle_event'] !== 'storybook' ? houdini() : []],
            sentrySvelteKit({
                sourceMapsUploadOptions: {
                    org: 'spur-ma',
                    project: 'spur-website',
                },
                autoUploadSourceMaps: true,
                adapter: 'vercel',
            }),
            sveltekit(),
        ],
    });
};

not the most elegant solution, one thing is that houdini constantly polls my backend for getting the latest graphql schema, could that be causing issue with storybook websockets?

[rohanrajpal]

@rohanrajpal can you provide a minimal reproduction? I quickly tried to reproduce this in a fresh SvelteKit project, and it's working fine as far as I can tell.

Hey @JReinhold, its working great on a fresh install, tho i finally found the issue

If i use https://houdinigraphql.com/, it involves setting upa houdini() plugin in the vite.config.ts, if that is enabled, HMR does not work. So currently i'm avoiding it this way

import { sveltekit } from '@sveltejs/kit/vite';
import houdini from 'houdini/vite';
import { defineConfig } from 'vite';
import { sentrySvelteKit } from '@sentry/sveltekit';

export default () => {
    return defineConfig({
        plugins: [
            ...[process.env['npm_lifecycle_event'] !== 'storybook' ? houdini() : []],
            sentrySvelteKit({
                sourceMapsUploadOptions: {
                    org: 'spur-ma',
                    project: 'spur-website',
                },
                autoUploadSourceMaps: true,
                adapter: 'vercel',
            }),
            sveltekit(),
        ],
    });
};

not the most elegant solution, one thing is that houdini constantly polls my backend for getting the latest graphql schema, could that be causing issue with storybook websockets?

Here is a minimum reproduction of the issue

https://github.com/rohanrajpal/houdini-storybook-hmr-bug-repro

Also conversation with the creator of houdini is going on at :
https://discord.com/channels/1024421016405016718/1152214264547905556

His initial reply

I don't think that it's linked with the schema pooling. You can check it by commenting the whatchSchema in your houdini.config.js.

That beeing said, I don't know what could be the issue ><
I'm not using storybook, so I'm not sure how to help there.

You have some graphql in your storybook?

Do you know if they transform files like Sentry, SvelteKit, Houdini?

i commented watchSchema and confirm that its not related to polling, my bad

@JReinhold do you know what might be the possible issue? also should i create a new issue for this?