Webpack plugin that connects fork-ts-checker-webpack-plugin (async: true) to error overlay of webpack-dev-server.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.npmignore
.prettierrc
LICENSE
README.md
package-lock.json
package.json
tsconfig.json

README.md

Fork TS Checker Async Overlay Webpack Plugin

npm version

Webpack plugin that connects fork-ts-checker-webpack-plugin (async: true) to error overlay of webpack-dev-server.

What

This plugin enables fork-ts-checker-webpack-plugin to show type check errors in overlay of webpack-dev-server, without specifying async: false option (which slows down).

By default fork-ts-checker-webpack-plugin runs type checking after compilation, so result is pushed to webpack-dev-server client before type check is done. So this plugin re-fires done hook of webpack-dev-server after type checking is done (bit hacky).

Installation

Please setup fork-ts-checker-webpack-plugin first.

For convenient, you can concat thisPlugin.plugins() to plugins array. Or you can add these plugins one-by-one. Don't forget to remove async: false option of fork-ts-checker-webpack-plugin to get speed up with this plugin.

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const ForkTsCheckerAsyncOverlayWebpackPlugin = require('fork-ts-checker-async-overlay-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader',
          options: {
            transpileOnly: true
          }
        },
        exclude: /node_modules/
      }
    ]
  },
  ...
  plugins: [
    ...
  ].concat(
    new ForkTsCheckerAsyncOverlayWebpackPlugin({
      checkerPlugin: new ForkTsCheckerWebpackPlugin()
    }).plugins()
  ),
  devServer: {
    overlay: true, // important
    inline: true
  }
}

Limitation (important)

Only errors (NOT warnings) are shown in overlay. webpack-dev-server reloads window if re-firing done hook without errors. To prevent it, this plugin only re-fire if there are any errors. It'd better to have async error reporting feature in webpack-dev-server itself.

License

MIT