Hot reload broken with StencilJS and Storybook 7

Question

I'm using Storybook and StencilJS together since a few years and It works very well. A few months ago Storybook updated to version 7 and It broke the hot reload of Stencil.

I've created a github repo here : https://github.com/storybookjs/storybook/issues/22124

You have a fresh install of stencil 4 and storybook 7.1. If you update the component created with stencil the hot reload will not be applied and I have no idea on how to fix that.

I think that something happened between webpack 4 and 5 (old version of storybook used webpack 4 but since version 7 it's webpack 5)

If someone wants to try the repo, here are the commands to write to make it work

npm i

In two differents terminals : npm run stencil:start npm run storybook:start

Answer 1

I found the solution.

I use react-webpack5 as bundler and this is the problem, the HMR is broken when used with Stencil. It worked correctly in the past with storybook 6 and react-webpack4.

So I replaced react-webpack5 with react-vite bundler, here is my config

const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
  ],
  framework: '@storybook/react-vite',
  core: {
    builder: '@storybook/builder-vite',
  },
  docs: {
    autodocs: 'tag',
    defaultName: 'Documentation',
  },
};
export default config;