Fork-ts-checker-webpack-plugin: Errors reported in async mode trigger error overlays in v5

Created on 3 Aug 2020 · 4Comments · Source: TypeStrong/fork-ts-checker-webpack-plugin

Current behavior

Starting from the v5 this plugin seems to add all reported issues to the compilation.errors list when webpack-dev-server is used, apparently to resolve #180.

However this change has an (unintended?) side effect - it makes error overlay plugins consider reported issues as build errors and block the app view. This behavior can be observed with devServer.overlay, error-overlay-webpack-plugin, react-refresh-webpack-plugin, and I think it might be the case with create-react-app's builtin overlay once it upgrades this plugin to v5.

Expected behavior

Personally I find the new behavior problematic. I'd like error overlay to show errors that actually break the application, for the same reason why TypeScript's noEmitOnError option is false by default.

Option 1

Add an option to enable (or disable?) the new behavior. This would be easy to implement and to configure, however it might be a little hacky (these issues are valid errors, so it makes sense for them to be included in compilation.errors?).

Option 2

Add an option to override severity of all issues reported by the plugin. This also would be easy to implement, however it removes the visual distinction between errors and warnings.

Option 3

Don't change anything in the plugin, but document this behavior and document way to ignore these errors on overlay level. It sounds like the best solution conceptually, however AFAIK none of the overlays have an option to ignore certain errors, and that might make configuration more complex.

Steps to reproduce the issue

// webpack.config.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  resolve: { extensions: ['.ts', '.js'] },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [{ loader: 'ts-loader', options: { transpileOnly: true } }],
      },
    ],
  },

  devServer: {
    hot: true,
    // Reproduction 1:
    // overlay: true,
  },

  plugins: [
    new ForkTsCheckerWebpackPlugin(),

    // Reproduction 2:
    // new (require('error-overlay-webpack-plugin'))(),

    // Reproduction 3:
    // new (require('@pmmmwh/react-refresh-webpack-plugin'))(),
  ],
};