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

[EricAdonis]

• 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 }

[alexander-akait]

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

Why you ignore this? Issue will closed again, if you don't fix this. Where example of configuration? Files what you have? Other information? How we should help you?

[EricAdonis]

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

Why you ignore this? Issue was closed again, if you don't fix this. Where example of configuration? Files what you have? Other information? How we should help you?

I have to link my repo "https://gitlab.com/EricAdonis/webpack-cra" in issues and image of steps to reproduce.

[sokra]

Could you try removing the AutomaticPrefetchPlugin?

[EricAdonis]

Could you try removing the AutomaticPrefetchPlugin?

I love you, thanks you very much. But you can gave me know the reason.

[sokra]

Looks like a bug. AutomaticPrefetchPlugin should not allow to apply loaders via config to the requests. I think it could be fixed by changing:

webpack/lib/AutomaticPrefetchPlugin.js

Line 47 in c841887

new PrefetchDependency(m.request),

- new PrefetchDependency(m.request),
+ new PrefetchDependency(`!!${m.request}`),

[EricAdonis]

Thanks you @sokra .

[sokra]

Send a PR

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[alexander-akait]

bump

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[alexander-akait]

@EricAdonis friendly ping, can you create reproducible test repo?

[alexander-akait]

webpack-contrib/css-loader#1243 (comment)

How Do We Reproduce?

git clone https://github.com/Talent30/Test
npm i
npm run dev

/cc @sokra

[sokra]

remove the AutomaticPrefetchPlugin from config

[sokra]

There is a PR that fixes the problem: #9492

Unfortunately it was never finished...

[alexander-akait]

@sokra Maybe we can finish it themselves

[sokra]

yep, i'll do that