storybook: [Bug]: Hot reload broken in Storybook 7 with Stencil 3.2
Describe the bug
Hello,
I’m on windows 10, node 16.3, npm 9.1.2
I use storybook + stencil for two years now and it always worked great.
I updated storybook from 6.5 to 7.0.5 and now the hot reload is broken for no storybook files. That means I can edit a xxx.stories.js file but not a xxx.scss or xxx.tsx file (provided by stencil)
The terminal has no error so it’s difficult to detect if something doesn’t work correctly.
<i> [webpack-dev-middleware] wait until bundle finished: /runtime~main.iframe.bundle.js <i> [webpack-dev-middleware] wait until bundle finished: /vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-21683d.iframe.bundle.js <i> [webpack-dev-middleware] wait until bundle finished: /main.iframe.bundle.js <i> [webpack-dev-middleware] wait until bundle finished: /runtime_main.b0bb9eaf7bd2c874c260.hot-update.json
I followed the classic migration guide when I updated storybook version : npx storybook@latest upgrade
Anyone could help me please?
To Reproduce
I can provide a repo if necessary.
System
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.1.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.48)
npmPackages:
@storybook/addon-actions: ^7.0.5 => 7.0.5
@storybook/addon-essentials: ^7.0.5 => 7.0.5
@storybook/addon-interactions: ^7.0.5 => 7.0.5
@storybook/addon-links: ^7.0.5 => 7.0.5
@storybook/html: ^7.0.5 => 7.0.5
@storybook/react: ^7.0.5 => 7.0.5
@storybook/react-webpack5: ^7.0.5 => 7.0.5
@storybook/testing-library: ^0.1.0 => 0.1.0
Additional context
No response
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 6
- Comments: 40 (8 by maintainers)
Hello @shilman, do you have any news about the Hot Reload problem ?
You can also add
buildDist: true,to thestencil.config.tsfile, to ensure these files are generated regardless of dev or prod mode build. I ran into the same issue with/dist/esm/polyfillsnot existing, but after some digging I figured out dev build skips building these files to save time.I can generate and link a repo to my build of Storybook HTML and StencilJS (latest) which has a workaround for the absence of hot reloading in the component.tsx and .css files. One thing I’m still searching for is why the reload only works 7 out of 10 times. Sometimes, the StencilJS watcher does not seem to notice a change and does not rebuild, but it beats rebuilding manually each time.
I’ll post a link over here when I’ve set it up.
@risto1913 Here is my personal repo with storybook 7.3.1 and stencil 4.0.5 : https://github.com/Loic57/storybook-stencil
npm i npm run storybook:start npm run stencil:start
But since the latest update of stencil it doesn’t work correctly. By default if you run npm run storybook:start it will not work.
You must first run npm run stencil:start and make an edit anywhere in your project to make stencil generate important files in dist/esm/polyfills. Without theses files Storybook will not work.
Here’s the link to the repo, feel free to check it out and let me know if it helps in any way 😉
Hey folks! 👋
I see what you mean now. My best guess right now is that while the components themselves get rebuilt, storybook doesn’t get them injected and defined because the
defineCustomElementsfunction is not called.On top of that, when I triggered a change that would call
defineCustomElementsagain, because the component is already registered, it’s not being replaced with any new code.I’ll need to reach out to the stencil team to see how that handle HMR in their integrated dev server so see if we can replicate that.
Hey everyone! 👋
Using a
npx create stencilproject and runningnpx storybook@latest init --type htmlI was able to create a working example with HMR working in Storybook 7. Check it out https://github.com/Integrayshaun/storybook-7-stencil
If you’re still having troubles after taking a peek, send me a reproduction of your issue and i’ll see what I can do to help
Hello @Loic57 @shilman , I’m having the same problem since I upgraded from Storybook 6 to 7. Thanks in advance for your help, Louis
@Integrayshaun , you can see the problem here : https://github.com/storybookjs/storybook/issues/22124#issuecomment-1715048929
Hey @louisschandeler Apologies for the wait! I’ve been caught up with a few other things.
I’ve just added it to my list for this afternoon and i’ll get back to you about where I get with it by 4pm EST the latest 😃
Hey @louisschandeler apologies for the wait! I’ve been away for the last two weeks. Let me take a look this week and I’ll get back to you.
@subasically nice script! I just changed it a bit because I’m using storybook 6.5 for my personal use (because of hot reload which is not working)
"storybook:start": "(node -e \"if (! require('fs').existsSync('./dist/esm/polyfills')){process.exit(1)} \" || npm run stencil:build) && start-storybook -p 6006",+1 using Vite as well to bundle Storybook.
+1, we have this problem as well
Same problem with updating from 6 to 7 with Stencil 2.22.2 (using Vite to bundle storybook).
Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏