How Do I Fail webpack2 on a TS Compile Error?

Question

I have a webpack2 configuration that is working well, except for the fact that I do not want the build to continue if there is a TS compile error. Here is an example of a legitimate error that I am getting:

ERROR in ./ClientSide/app/panels/panel-side-bar/my-organizer/my-organizer.component.ts
(127,33): error TS2346: Supplied parameters do not match any signature of call target.

This is a correct error, but I want webpack to not just continue. Currently, no matter what TS compile errors occur during the webpack compile, webpack still builds the bundle. I'd like to have webpack throw the error it is already emitting (in red), and stop the bundle process when this happens.

I tried adding the configuration switch in my webpack.config:

bail: true,

But that did not resolve the issue.

If I am supposed to identify something in the loader for TS, how would I tell it to push the error to webpack2? I tried the following TS loader options but they didn't have the effect of propagating the error to webpack:

module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: ['ts-loader?' + JSON.stringify({transpileOnly: false, noEmitOnError: true})],
            exclude: [/node_modules/, /test/]
        },

However, this did not work either.

It seems that there should be someway built into webpack or its loaders to properly propagate errors up to fail the process. Anyone have a solution that can allow me to configure for such failures to be bubbled up and still allow me to view the TS errors that are being produced (that way I can not only know the build failed, but the specific TS error that caused it).

I did some research and found people claiming that using (webpack-fail-plugin) should fix this problem, however, that was apparently meant for just webpack 1. Supposedly, webpack2 fixes this issue, as the plugin clearly claims https://www.npmjs.com/package/webpack-fail-plugin . However, this is not true, as my post here is confirming. And, in fact, the ts-loader itself claims that you will need to use the plugin for webpack 2 (see https://github.com/TypeStrong/ts-loader#failing-the-build-on-typescript-compilation-error ). To try every last possible solution, I imported the plugin to my project and tried using it as per the usage docs ( https://github.com/TiddoLangerak/webpack-fail-plugin#usage ). But, alas, it fails not the build.

I'm losing my mind trying to understand a solution for webpack 2. Any one out there come to a reasonable answer on this?

Answer 1

Just add a Plugin in your webpack config like this:

plugins: [function() {
    this.plugin("done", function(stats) {
        //Since webpack dependent Stats.js
        //Just see the API of Stats.js
        //You can do anything with the stats output
        if (stats && stats.hasErrors()) {
            stats.toJson().errors.forEach((err) => {
                console.error(err);
            });
            process.exit(1);
        }
    }
}]

Test in Webpack 2.6.1 with ts-loader 2.2.2.

Hope this help:)