Webpack-hot-middleware: Uncaught TypeError: Cannot read property 'accept' of undefined

[ngohungphuc]

I'm using these 2 packages

 "webpack-dev-middleware": "^3.1.3",
 "webpack-hot-middleware": "2.22.2"

The error I get is

Uncaught TypeError: Cannot read property 'accept' of undefined
at Object.eval (main.js:15)
at eval (main.js:17)
at Object../React/js/main.js (main.js:165)
at n (main.js:1)
at ./React/css/app.scss (main.js:1)
at main.js:1

when using module.hot.accept();

Full code can be found here

[glenjamin]

You appear to have removed the issue template, which exists for a reason.

That error is likely caused by not including the hot module reloading plugin.

[ngohungphuc]

@glenjamin tried with you suggest and the error gone away but nothing happened. Here is my webpack

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  entry: {
    main: "./React/js/main.js"
  },
  output: {
    path: path.resolve(__dirname, "wwwroot/dist"),
    filename: "[name].js",
    publicPath: "/dist/"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {}
    }),
    new MiniCssExtractPlugin({
      filename: "cmscore.css"
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default']
    }),
    new UglifyJsPlugin(),
    new CompressionPlugin({
      test: /\.(js|css)/
    })
  ],
  module: {
    rules: [{
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              minimize: true,
              sourceMap: true
            }
          },
          {
            loader: "sass-loader"
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: ["babel-loader", "eslint-loader"]
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        loader: "file-loader"
      },
      {
        test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
        loader: "file-loader"
      }
    ]
  },
  watch: true
};