webpack: After change file .js (import (css, less, scss)), webpack result is error.

• This is my project: https://gitlab.com/EricAdonis/webpack-cra
• Can someone help me. I really need help. I thank you very much if you support me.

Do you want to request a feature or report a bug?

• report a bug.

What is the current behavior?

• I’m working on a project boilerplate with webpack (optimized for bundler) but I have a very strange error in during installation.

If the current behavior is a bug, please provide the steps to reproduce.

• step 1: yarn
• step2: yarn start (it work)
• step3: change file app.js (it not work)
• step4: change file app.js (it not work)
• I’m working on a project boilerplate with webpack (optimized for bundler) but I have a very strange error in during installation.
• After the first run, it work.
• But after i changed file app.js, hot reload worked and reloaded, but it thrown an error as below.
• And so on, after each change file *.js, it thrown an error What is the expected behavior?
• After hot reload applied, js,css bundler file built successfully. If this is a feature request, what is motivation or use case for changing the behavior? Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System. webpack version: lts Node.js version: 10.16.2 Operating System: Ubuntu MyConfig:

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const cssnano = require('cssnano')
const AutoDllPlugin = require('autodll-webpack-plugin')

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: [
      require('autoprefixer')
    ]
  }
}

const pluginsOfProc = [
  new MiniCssExtractPlugin({
    filename: 'static/css/[name].[hash].css',
    chunkFilename: 'static/css/chunk/[id].[hash].[contenthash].chunk.css',
    ignoreOrder: false
  }),
  new OptimizeCSSAssetsPlugin({
    cssProcessor: cssnano,
    cssProcessorOptions: {
      discardComments: {
        removeAll: true
      }
    }
  }),
  new AutoDllPlugin({
    inject: true,
    filename: '[id].[hash].dll.js',
    path: 'static/dll',
    entry: {
      vendor: [
        'react',
        'react-dom'
      ]
    }
  })
]

const _default = isDev => ({
  cache: true,
  mode: isDev ? 'development' : 'production',
  entry: path.resolve(__dirname, '../src/index.js'),
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/[name].[hash].js',
    chunkFilename: 'static/js/chunk/[id].[hash].[contenthash].chunk.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/,
            use: [
              { loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader },
              { loader: 'css-loader', options: { importLoaders: 1 } },
              {...postcssLoader}
            ]
          },
          {
            test: /\.scss$/,
            use: [
              { loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader },
              { loader: 'css-loader' },
              {...postcssLoader},
              { loader: 'sass-loader' }
            ]
          },
          {
            test: /\.less$/,
            use: [
              { loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader },
              { loader: 'css-loader' },
              {...postcssLoader},
              { loader: 'less-loader' }
            ]
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus(),
              workerParallelJobs: 2
            }
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [
                '@babel/preset-env',
                '@babel/preset-react'
              ],
              plugins: [
                'react-hot-loader/babel',
                [
                  '@babel/plugin-proposal-decorators',
                  { legacy: true }
                ],
                [
                  '@babel/plugin-proposal-class-properties',
                  { loose: true }
                ],
                '@babel/plugin-transform-runtime'
              ]
            }
          }
        ]
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true
            }
          }
        ]
      }
    ]
  },
  resolve: {
    modules: [
      path.resolve(__dirname, '../src'),
      path.resolve(__dirname, '../node_modules')
    ],
    extensions: ['.js', '.jsx'],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devtool: isDev ? 'cheap-module-eval-source-map' : '',
  devServer: {
    port: 10000,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    hot: true,
    hotOnly: true,
    compress: true,
    inline: true
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html'),
      inject: true
    }),
    new webpack.optimize.MinChunkSizePlugin({
      minChunkSize: 512
    }),
    ...(isDev ? [
      new webpack.AutomaticPrefetchPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ] : pluginsOfProc)
  ],
  optimization: {
    moduleIds: 'hashed',
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    },
    ...(isDev && {
      usedExports: true
    }),
    ...(!isDev && {
      minimizer: [
        new TerserPlugin({
          cache: true,
          parallel: true
        })
      ]
    })
  }
})

module.exports = { _default }