-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: 7.0.0-beta.28 HMR not working with @storybook/react-vite #20643
Comments
Also noticing that HMR broke after upgrading. I've been testing different versions, and seems like it broke with beta.26 - Maybe it's caused by #20594 ? Changing a component causes it to skip printing the
In beta.26:
|
True I've been able to reproduce the same thing between Yeah it does seem like the only relevant change made between those versions is #20594. |
It looks like it actually says there are issues with HMR in the readme for this plugin:
|
See #20655 |
w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.30 containing PR #20654 that references this issue. Upgrade today to the
Closing this issue. Please re-open if you think there's still more to do. |
It seems like with the new version (v7.0.0-beta.30) I get this when opening the storybook preview:
|
@valentinpalkovic @ndelangen any idea why this would now be failing in pnpm projects? I thought we had all the dependencies straightened out even before the pre-bundling, so not sure why this is breaking now. @stevezhu does it still work correctly when building for production? |
It's literally a dependency of the vite-builder?!
|
Yes, but with pnpm (and maybe yarn pnp), it needs to also be imported in the right context. Because this is being loaded in the browser, we need to make sure it's in the user's package.json. I remember now, previously we imported these internal packages from the framework, which re-exported from preview-api, etc. Now we rely on the pre-bundling, which is turned off in dev now, so it's breaking. I am guessing that it still works fine in builds. |
It looks like it's related to this issue it was mentioned in storybookjs/builder-vite#55 (comment). I was using pnpm and the hoisting workaround mentioned does work for me. Seems fine with the production build. Also trying to look into why vite-plugin-externals is breaking HMR from the websocket upgrade route. |
If I understand correctly, this is only blocked for now until #20655 is figured out and a fix is released on Comparing both |
I finally figured out the issue after an unreasonable amount of debugging on bundled vite server code 😂. The Could make sense to move to any internal plugin too if the plugin is as simple as #20698, but otherwise this should fix the issue. If anyone is curious, it's because plugin configs are deeply merged by vite in the config hook. conf = mergeConfig(conf, res) https://github.com/vitejs/vite/blob/v4.0.4/packages/vite/src/node/config.ts#L1109 Since hmr: {
port: options.port,
server: devServer,
}, |
Also @shilman it would be great if you could reopen this issue to track the fix. |
Thank you so much for your time debugging this! 🎉I will ask internally, whether we want to wait for a fix of vite-plugins-externals, or moving that plugin internally. FYI: @ndelangen, @IanVS |
Yeah not sure if the maintainer of the package will respond though it seems like they haven't really been active since july. |
I sent them an email as well this morning. But yes, I think if we don't get a response in a couple of days we'll need to take a different approach. |
¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.36 containing PR #20698 that references this issue. Upgrade today to the
Closing this issue. Please re-open if you think there's still more to do. |
Describe the bug
HMR doesn't seem to be working with storybook react with the vite builder.
Package version:
@storybook/[email protected]
Wondering if anyone has anymore context on why the following options are set for the vite builder dev server config:
Reference: https://github.com/storybookjs/storybook/blob/v7.0.0-beta.28/code/lib/builder-vite/src/vite-server.ts#LL18-L21
It seems to work fine if the vite hmr options are removed which allows vite to initialize its own websocket server for hmr.
With the existing config, the websocket server doesn't seem to be able to receive the upgrade event below.
Reference: https://github.com/vitejs/vite/blob/v4.0.4/packages/vite/src/node/server/ws.ts#L99-L105
To Reproduce
No response
System
Additional context
No response
The text was updated successfully, but these errors were encountered: