[Bug]: Hot reload broken in Storybook 7 with Stencil 3.2

[Loic57]

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

[shilman]

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! 🙏

[Loic57]

@shilman Hello, thank you for your reply, here is the repo : https://github.com/Loic57/storybook-stencil

Clone npm i In two different terminals :

• npm run stencil:start (version 3.0.2)
• npm run storybook:start (version 7.0.5)

If you go to src > components > button and you edit the .stories.js file it will hotreload. But if you try to edit the .tsx or .scss file It won't work.

[Loic57]

@shilman I forgot to mention that if you downgrade sb to 6.5.16 the livereload reworks. Maybe a difference between webpack 4 and 5 ?

[Loic57]

@shilman Hello.

As a test I tried to start over from a fresh install of stencil and storybook with no extra modules/dependencies which could disturb the process but it's still no working.

Is there anyway I could help?

[louisschandeler]

Hello @Loic57 @shilman , I'm having the same problem since I upgraded from Storybook 6 to 7. Thanks in advance for your help, Louis

[djount]

Hi @shilman,

I'm having the same issue since I updated from Storybook 6 to 7. Could you help us ?

[shilman]

Thanks for the reproduction @Loic57 and sorry for the delayed response. We'll take a look and see if we can figure out what's going on here.

[ghost]

I am having the same issue updating from 6 to 7 and StencilJS 3.2.

[oncode]

Same problem with updating from 6 to 7 with Stencil 2.22.2 (using Vite to bundle storybook).

[Loic57]

@shilman Hello, sorry for late answer, I updated stencil 7.0.5 to 7.0.22 and it's still the same result, no hot reload.

[louisschandeler]

Hello @shilman, do you have any news about the Hot Reload problem ?

[efrymire]

+1, we have this problem as well

[Loic57]

@shilman ?

[dgonzalezr]

Same problem with updating from 6 to 7 with Stencil 2.22.2 (using Vite to bundle storybook).

+1 using Vite as well to bundle Storybook.

• Storybook: 7.2.1
• StencilJS: 4.0.4

[risto1913]

Have anyone got a repo with

• Storybook: 7.2.1
• StencilJS: 4.0.4

Running at all?

And if so any chance of seeing the code? I'm struggling with getting it all up and running.

[Loic57]

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

[risto1913]

Thank you @Loic57 this was a big help.

[subasically]

Thank you @Loic57

I've added a new script command to do the check for dist/esm/polyfills

"storybook": "(node -e \"if (! require('fs').existsSync('./dist/esm/polyfills')){process.exit(1)} \" || stencil build) && storybook dev -p 6006"

[Loic57]

@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",

[Loic57]

Is anyone working on this hot reload issue ?

[ShaunEvening]

Hey everyone! 👋

Using a npx create stencil project and running npx storybook@latest init --type html

I 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

[Loic57]

Hello @Integrayshaun

Indeed your code is working, thank you! I did the same thing than you but I used react and weback5 instead of html and vite.

Maybe there is an issue with webpack5 working with stencil!

[Loic57]

Wait no... In fact the hot reload doesn't work on your version too, I tried to edit the css of cool-button.css and It didn't worked, I have to press F5 to see the changes.

I'm on node 18.17

[Loic57]

Here is a repo I created with stencil 4 and sb 7.4.1

https://github.com/Loic57/stencil-4-sb-7

I first installed stencil then I installed sb, I picked react and webpack5 (this is the same procedure I did in the past with storybook 6).

Steps :

• Go to stencil-storybook folder
• npm i
• npm run stencil:start
• npm run storybook:start

If you edit one of the components provided by storybook it will work. If you edit the story of my "button" components (in the foundation folder) the hot reload will work But If you edit the scss or the tsx of my button component It will not trigger the live reload :(

[Loic57]

I FIXED IT!

After a quick talk with another stencil/storybook dev he told me to replace @react-webpack5 bundler with @react-vite bundler.

I did it and It works perfectly.

Just change your stories.js file with stories.jsx.

[louisschandeler]

Hello,

Yes it works with @storybook/react-vite framework but not with @storybook/react-webpack5 framework @shilman @Integrayshaun , do you have a fix for the hot reload with react-webpack5 ?

Thanks in advance, Regards

[ShaunEvening]

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.

[louisschandeler]

Hello @Integrayshaun ,

Do you have news about the hot reload with react-webpack5 framework? :)

[ShaunEvening]

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 :)

[louisschandeler]

Thank you @Integrayshaun :)

[ShaunEvening]

@louisschandeler, now that I think about it, are you able to share a minimal reproduction of the problem? I used the HTML version of Storybook but if you're using react-webpack5 tht might have some subtle tweaks causing the problem.

[JeroenVdb]

FYI I have the same problem with html-webpack and stencil. It looks like storybook is picking up the changes en creating the “hot” files but the reloading does not happen. Tomorrow I’ll try to post a reproduction.

[louisschandeler]

@Integrayshaun , you can see the problem here : https://github.com/storybookjs/storybook/issues/22124#issuecomment-1715048929

[oncode]

Its not just webpack i use vite and hot reload doesnt work.

[ShaunEvening]

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 defineCustomElements function is not called.

On top of that, when I triggered a change that would call defineCustomElements again, 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.

[cheryl-c-tirerack]

This is happening in NextJS version as well. Filed here: https://github.com/storybookjs/storybook/issues/24854

[louisschandeler]

Hey @Integrayshaun,

Have you heard from the Stencil team?

[ShaunEvening]

Hey @louisschandeler nothing yet, sorry my friend 😞

I've just followed up with them to see if I can catch someone. However, I doubt I'll hear from anyone for the rest of the week as it's Thanksgiving in the US today

[maahtiin]

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

You can also add buildDist: true, to the stencil.config.ts file, to ensure these files are generated regardless of dev or prod mode build. I ran into the same issue with /dist/esm/polyfills not 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.

[maahtiin]

Here's the link to the repo, feel free to check it out and let me know if it helps in any way ;)

[rschaufler]

i finally got Storybook 8 + StencilJS + Vite to work with Hot Reloading too

as it turns out, the cause was quite primitive. If you have a look at the documentation of the vite dev server (which storybook uses), there is a very notable hint:

The Vite server watcher watches the root and skips the .git/, node_modules/, and Vite's cacheDir and build.outDir directories by default. When updating a watched file, Vite will apply HMR and update the page only if needed.

See: https://vitejs.dev/config/server-options.html#server-watch

build.outDir is set to dist by default. Due to this, all changes made by StencilJS when recompiling the dist folder are ignored 🙈

Simple fix:

Put the following configuration into your .storybook/main.ts (or .js) file

  async viteFinal(config, { configType }) {
    const { mergeConfig } = await import('vite')

    if (configType !== 'DEVELOPMENT') {
      return config
    }

    return mergeConfig(config, {
      build: {
        // this is set to 'dist' by default which causes hot-reloading for stencil components to break
        // see: https://vitejs.dev/config/server-options.html#server-watch
        // setting it to anything other than dist fixes the issue
        outDir: 'dist-vite'
      }
    })
  },

or full example:

import type { StorybookConfig } from '@storybook/web-components-vite'

const config: StorybookConfig = {
  stories: ['../src/components', '../src/styleguide', '../src/stories'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials'
  ],
  staticDirs: ['../dist/lib-components'],
  docs: {
    autodocs: true
  },
  async viteFinal(config, { configType }) {
    const { mergeConfig } = await import('vite')

    if (configType !== 'DEVELOPMENT') {
      return config
    }

    return mergeConfig(config, {
      build: {
        // this is set to 'dist' by default which causes hot-reloading for stencil components to break
        // see: https://vitejs.dev/config/server-options.html#server-watch
        // setting it to anything other than dist fixes the issue
        outDir: 'dist-vite'
      }
    })
  },
  core: {
    disableTelemetry: true
  },
  framework: '@storybook/web-components-vite'
}

export default config

If anyone is interested, i can provide a full project setup on Github.

[rschaufler]

https://github.com/rschaufler/stencil-storybook-vite

This is a working example of Storybook 8 + Stencil 4 + Vite. Make sure you have pnpm installed. I kept the repository as minimal as possible. You can find more information in the README file i provided. Apart from the solution for Vite Hot Reloading, this repository provides a neat solution to handle dependencies between Storybook and Stencil scripts by using Google Wireit. Make sure to use the provided start script to test developing with Stencil and Storybook.

Let me know if you have any questions or feedback.

[marksy]

https://github.com/rschaufler/stencil-storybook-vite

This is a working example of Storybook 8 + Stencil 4 + Vite. Make sure you have pnpm installed. I kept the repository as minimal as possible. You can find more information in the README file i provided. Apart from the solution for Vite Hot Reloading, this repository provides a neat solution to handle dependencies between Storybook and Stencil scripts by using Google Wireit. Make sure to use the provided start script to test developing with Stencil and Storybook.

Let me know if you have any questions or feedback.

Nice one.

I tested it and it has the same issue of not picking up changes in styles, which I don't know if it's a Stencil or Storybook issue

[rschaufler]

@marksy i don't have the issue with the styles not updating. Do you mean styles of a component or are you refering to global styles? Also, what editor / IDE are you using? I had some issues with WebStorm and style changes not being detected but could solve it by adjusting the WebStorm configuration.

In VSCode it works without any problems.

[marksy]

Yeah styles of the component weren't updating.

Ah interesting, yes I'm using Webstorm (however pnpm was running in Terminal). Will try VSC :)

[rschaufler]

@marksy as far as i understand, its less about where you run the Stencil / Storybook Dev Script but more about how WebStorm saves its files. I solved this issue by deactivating "Back up files before saving". I have no idea about the internals of WebStorm and why this option affects that the watch Script can detect changes, but i am more than happy to be able to use WebStorm on my project.

[Loic57]

Yup same issue than @marksy I have storybook 8.0.8 with stencil 4.16 and the hot reload works only on storybook files.

If I edit a stencil file (tsx or scss) I see something is reloading in the terminal : 16:40:26 [vite] hmr update /virtual:/@storybook/builder-vite/vite-app.js

Normally it should be : 16:40:26 [vite] hmr update /dist/esm/COMPONENT-NAME-entry.js

I opened this ticket more than one year ago and I found a solution which was replacing webpack with vite but today I have another issue with vite.

Thank you @rschaufler for your repo, I updated my vite config with your outDir tip and now If I press F5 I can see my changes because before that I had to restart my storybook, a huge pain...

[rschaufler]

@Loic57 i recently updated to Storybook 8.2 and i also see 16:40:26 [vite] hmr update /virtual:/@storybook/builder-vite/vite-app.js in my console, but it doesn't affect the hot reloading since it is still working for me. If you can provide a repository (edit: updated version of your repository from 2023) i could have a look why hot reloading is not working in your case.

[Loic57]

I will do that on wednesday, I'm working in a big company and we can't push on github, I have to wait to be on homeworking.

Btw I updated stencil 4.19 and sb 8.2.5 and the issue is sill here. What's your Node version @rschaufler ?

[rschaufler]

@Loic57 i am using Node v22.5.1