Mini-css-extract-plugin: HMR not working even with simple example

[filipw01]

I am opening an issue because no one answered me on StackOverflow and I don't know whether this is a bug or I am doing something wrong

• Operating System: Ubuntu 19.04
• Node Version: 12.1.0
• NPM Version: 6.9.0
• webpack Version: 4.30.0
• mini-css-extract-plugin Version: 0.6.0

Expected Behavior

I was expecting hmr to work with that configuration

Actual Behavior

Nothing happens, even on simple example

Code

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
  entry: ["./style.css", "./app.js"],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
              hmr: process.env.NODE_ENV === "development",
              reloadAll: true,
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

How Do We Reproduce?

Here is link to repo with simple config and structure https://github.com/filipw01/mini-css-with-hmr

[alexander-akait]

Why you use reloadAll?

/cc @ScriptedAlchemy

[filipw01]

Because hmr isn't working and that was supposed to be the forcefull way to reload (which isn't working anyway)

[mzdr]

I can confirm this. In my setup HMR does not work at all as well. Looks similar to the one @filipw01 posted.

[ScriptedAlchemy]

i recently patched this in extract-css-chunks-webpack-plugin with great success. I will roll another PR back to mini-css tonight but it. might take some time because the line of code was put in place to fix another bug, removing it would re-introduce a less serious bug but still..

Track my profile and ill open that tonight. It'll need to go through some discussion about how to resolve the small bug it will re-introduce

[ScriptedAlchemy]

@filipw01 can you try using https://github.com/faceyspacey/extract-css-chunks-webpack-plugin and let me know if HMR works there. If so ill open the PR.

The projects merged, so the api is almost the same. hmr:true needs to be hot:true in extract-css-chunks

Sorry for the inconvenience

[filipw01]

@ScriptedAlchemy I'm currently really busy but I'll try to do it this week.

[filipw01]

@ScriptedAlchemy extract-css-chunks-webpack-plugin isn't working for me either. I think that I am doing something wrong. Do I need any more code than i have in the webpack.config.js? Do I need to install and run webpack-dev-server? I was trying some things and I feel like I'm the only one, that can't get it to work. Have you seen my basic example I posted before? Is everything fine with it?

[alexander-akait]

@filipw01 for hmr you need setup webpack-dev-server (or use HotModuleReplacmentPlugin https://webpack.js.org/plugins/hot-module-replacement-plugin/).

Why? Because you code don't contains hmr runtime code using plugin solve this, but we recommend use webpack-dev-server

[ouweiya]

I just started getting into this plugin and I also encountered the same problem.
I found that process.env.NODE_ENV is undefined, so hmr: process.env.NODE_ENV === 'development' always false,

I think it may be me, the configuration error in other places, in short is not a problem with this plugin.

[KeithChou]

Probably the precess.env.NODE_ENV mode is not development, u can just change the hmr property to true, and check it again

[rcjiang]

The example about HMR in the readme documentation is misleading. In webpack.config.js you cannot get the mode value using process.env.NODE_ENV.

[ScriptedAlchemy]

Usually this is set via environment variables. If you’re using mode, then you likely could just set a bool or whatever you’re using to determine mode.