Errors in async tasks cause webpack to hang

[hansl]

I want to report a bug.

What is the current behavior?

Webpack hangs indefinitely when using webpack-dev-middleware (directly or indirectly through webpack-dev-server) and there's an error in an async step.

Steps to reproduce.

Make a plugin like this:

class MyErrorPlugin {
  apply(compiler) {
    compiler.plugin('make', (compilation, cb) => {
      setTimeout(() => cb(new Error('Heho!')), 1);
    });
  }
}

Run a webpack configuration with webpack-dev-middleware and this plugin, and the generation will hang forever.

Note that this occurs in the Webpack plugin for Angular 2, when an application cannot be statically analyzable, since we perform that analysis . Also, if this error is not reported in the async task everything works as the expected behaviour.

The reason is the callback used when running webpack (see here and here (watch)) which simply throw instead of reporting the error and stopping the build. Because the build is not stopped by Webpack itself, webpack is waiting for the make step of the compiler to finish, which won't happen because the throw killed the task.

Not sure what the proper solution is.

What is the expected behavior?

Show error on console, say the bundle is INVALID or something, watch for file changes, rebuild when file changes.

[SpaceK33z]

Thanks for your clear bug report. I think the best solution would be to simply log the error, using options.warn() instead of throw.

[SpaceK33z]

Could you check if #157 fixes it for you?

[hansl]

Seems like #157 fixes the middleware part, but webpack itself is hanging.

Running this config:

class CustomErrorPlugin {
  apply(compiler) {
    compiler.plugin('make', function(compilation, callback) {
      Promise.resolve()
        .then(() => console.log('0'))
        .then(() => callback(new Error('hello')));
    });
  }
}


module.exports = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  entry: './app/main.ts',
  output: {
    path: './dist',
    filename: 'app.main.js'
  },
  plugins: [
    new CustomErrorPlugin()
  ],
  module: {
    loaders: [
      { test: /\.css$/, loader: 'raw-loader' },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.ts$/, loader: 'awesome-typescript-loader' }
    ]
  },
  devServer: {
    historyApiFallback: true
  }
};

webpack --watch blocks at 50% on my custom project. Still investigating, but it seems like the PR would help.

[hansl]

(note there is no middleware).

[hansl]

I'll file a bug with Webpack itself.