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

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 

[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

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