Webpack Hot Module Reload: Aborted

[ahbagheri]

This is an old issue and I went through other threads but I couldn't fix it.

For some reason, I cannot get the HMR to work. Here is y setup:

webpack.config:

const webpack = require("webpack");
const path = require("path");
const protocol = process.env.HTTPS === "true" ? "https" : "http";
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require("dotenv-webpack");

const plugins = [
  new Dotenv({
    path: `./.env`,
    allowEmptyValues: true, 
    systemvars: true,     
    silent: false, 
    defaults: false, 
  }),
  new webpack.ProvidePlugin({
    process: "process/browser",
    Buffer: ["buffer", "Buffer"],
  }),
  new HtmlWebpackPlugin()
];
const config = {
  plugins: plugins,
  entry: ["./src/index.js"],
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index.js",
    publicPath: "/app/dist/",
  },
  module: {
    rules: [
      {
        test: /\.(gif|svg|jpg|png)$/,
        loader: "file-loader",
      },
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
        exclude: /\.module\.(sa|sc|c)ss$/,
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: "[local]--[hash:base64:5]-wcd",
              },
            },
          },
          "sass-loader",
        ],
        include: /\.module\.(sa|sc|c)ss$/,
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
    alias: {
      "react-dom": "@hot-loader/react-dom",
      process: "process/browser",
      stream: "stream-browserify",
      zlib: "browserify-zlib",
    },
  },
  devServer: {
    static: "./dist",
    historyApiFallback: true,
    port: 4000,
    hot: true,
  },
};

module.exports = config;

package.json

{
...
"scripts": {
    "build:dev": "webpack --mode development",
    "build:prod": "webpack --mode production",
    "start": "webpack-dev-server  --hot --mode  development"
  },
}

.babelrc

{
    "presets": [ [ "@babel/preset-env", {"modules": false}],
                 "@babel/preset-react"],
    "plugins": [ "react-hot-loader/babel"]
}

And here is what happened at the time of update:

What am I getting wrong?

[vankop]

better ask in react tracker, sounds like hot update is not accepted ( this depends on your module code )