Webpack watching does not recover after broken less is fixed

[olegstepura]

• Operating System: Linux/Mac
• Node Version: v8.11.1
• NPM Version: 6.2.0
• webpack Version: 4.22.0/4.27.1 (tried both)
• less-loader Version: 4.1.0

This issue is for a:

• bug
• feature request
• modification request

Code

webpack.config.js

module.exports = {
  // ...
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      path: targetDirectory,
    }),
  ],
  // modules
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'css-hot-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'less-loader',
            options: { // compiles Less to CSS
              javascriptEnabled: true,
              paths: lessResolvePaths.map(p => path.resolve(process.cwd(), p)),
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.less'],
  },
  devServer: {
    // ...
  },
};

Issue

Webpack watching does not recover after breaking less. Imagine I am editing less file and once I make a mistake and save something like

body {
  background;
}

of

@brandColor;

I see this messages in terminal,

✖ ｢wdm｣:    29 modules

ERROR in ../app/styles/theme.less
Module build failed (from [stripped]/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from [stripped]/node_modules/less-loader/dist/cjs.js):


body {
  background;
          ^
Unrecognised input
      in [stripped]/app/styles/themes/_theme-params.less (line 22, column 12)
    at runLoaders ([stripped]/node_modules/webpack/lib/NormalModule.js:301:20)
    at [stripped]/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at [stripped]/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback ([stripped]/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at <anonymous>
ℹ ｢wdm｣: Failed to compile.

But when I correct the issue nothing happens. Webpack is in broken state until restart.
Until I make a mistake everything works fine (hot reloads, watches, all good).

I tried adding

optimization: {
  noEmitOnErrors: true
},

to module.exports of the webpack config. I also tried adding new webpack.NoEmitOnErrorsPlugin(), to a list of plugins. nothing helps.

Also I enabled overlay: true, in devServer and it works when an error occurs (I see the overlay). Removing it does not help.

Expected Behavior

It would really make sense to recover after the error is fixed and continue watching.

Actual Behavior

After the issue is fixed, webpack does not continue watching the code and hot updating it.

How Do We Reproduce?

Possibly you already have some similar setup, let me know if I really need to setup a separate repo for this. Cannot share corporate repo code as is.

Thanks!

[alexander-akait]

Bug, need add

 if (err.file) {
        this.dependency(err.file);
      }

or something same, feel free to send a PR

[olegstepura]

Hi, @evilebottnawi!

To which file should I add this? I can try locally and submit a PR then.

[alexander-akait]

@olegstepura I think here https://github.com/webpack-contrib/less-loader/blob/master/src/processResult.js#L25

[matthewlawson]

@olegstepura @evilebottnawi Are you working on this? If not I can take a stab at it.

[olegstepura]

@matthewlawson I did not have time to check this yet. I would appreciate if you could take a look.