Webpack Hot Reload not working in react Storybook 6.0-rc.9

[christianwiedemann]

Describe the bug
After changing a story the page reloads and I get following message in the browser console

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.

To Reproduce

1. Fresh install of storybook 6 react with npx sb@next init --type react
2. Go to the button story
3. Change something inside 'stories/Button.stories.js'

Primary.args = {
  ...
  label: 'Button',
};

Expected behavior
A hot reload without page reload

Screenshots

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: Linux 5.4 Pop!_OS 20.04 LTS
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: 1.22.4 - ~/.npm-global/bin/yarn
    npm: 6.14.4 - /usr/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 78.0.1
  npmPackages:
    @storybook/addon-actions: ^6.0.0-rc.9 => 6.0.0-rc.9 
    @storybook/addon-essentials: ^6.0.0-rc.9 => 6.0.0-rc.9 
    @storybook/addon-links: ^6.0.0-rc.9 => 6.0.0-rc.9 
    @storybook/react: ^6.0.0-rc.9 => 6.0.0-rc.9 

[ndelangen]

Confirmed!

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.18 containing PR #11709 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[rterala]

@shilman I'm on storybook 6.0.21 and the storybook doesn't hot reload still any changes to custom webpack.config.js is this expected?

[hamanovich]

Also confirm, using 6.0.21 and MiniCssExtractPlugin loader. HMR doesn't work.

webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                hmr: true,
            },
        },
        'css-loader',
        'postcss-loader',
        {
            loader: 'sass-loader',
            options: {
            implementation: require('sass'),
            sassOptions: {
                fiber: require('fibers'),
            },
            },
        },
        ],
    });
    return config;
  }

Moreover, once I run yarn storybook it throws an error:
ERROR in ./src/styling/brands/XXX.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/mini-css-extract-plugin/dist/loader.js??ref--16-0!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--16-3!./src/styling/brands/XXX.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
4 │ var cssReload = require("/Users/XXX/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js")(module.id, {"hmr":true,"reloadAll":true,"locals":false});
│

On the version 5.2.8 HMR works fine

[shilman]

HMR is not expected to work on webpack config files

[hamanovich]

HMR is not expected to work on webpack config files

That's true, but I also need to extract CSS styles to a separate file then, just to make it available by static url, e.g. http://localhost:6006/2.css.
And my config above works well on Storybook 5, but not with the version 6.

If I disable HMR:

{
            loader: MiniCssExtractPlugin.loader,
            options: {
              //  hmr: true,
            },
        },

it works, but without hot reloading on styles.

P.S. Just copy/paste MiniCssExtractPlugin from the official webpack website (https://webpack.js.org/plugins/mini-css-extract-plugin/#advanced-configuration-example) still no success. To confirm, using storybook v5 - it works.

[shilman]

@ndelangen any ideas?

[hamanovich]

I've already fixed that.
As I use separate webpack config for handling scss files, I removed '@storybook/preset-scss' from the addons array and HMR started working properly. Hope it helps for someone ;)

[shilman]

@hamanovich is there a problem with preset-scss? or is it a conflict between preset-scss and your custom configuration?

[hamanovich]

@shilman can't surely answer, I used the default config from https://webpack.js.org/plugins/mini-css-extract-plugin/#advanced-configuration-example and @storybook/preset-scss together -> HMR doesn't work, and yarn storybook throws an error described above. Finally, I removed this preset -> and it works.