{"id":20041,"library":"fork-ts-checker-async-overlay-webpack-plugin","title":"Fork TS Checker Async Overlay Webpack Plugin","description":"A webpack plugin that connects fork-ts-checker-webpack-plugin (with async: true) to the error overlay of webpack-dev-server. Version 0.4.0 is the latest stable release. The plugin addresses the limitation that type checking errors from fork-ts-checker-webpack-plugin are not shown in the dev server overlay when running asynchronously (async: true). It works by re-firing the webpack-dev-server's done hook after type checking completes, but only if there are errors, to avoid unnecessary page reloads. It requires fork-ts-checker-webpack-plugin ^4.1.6 as a peer dependency and is intended for use with ts-loader's transpileOnly option. Key differentiator: allows fast incremental builds (async: true) while still showing type errors in overlay, avoiding the need to set async: false which slows down builds.","status":"active","version":"0.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/ypresto/fork-ts-checker-async-overlay-webpack-plugin","tags":["javascript","webpack","typescript"],"install":[{"cmd":"npm install fork-ts-checker-async-overlay-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add fork-ts-checker-async-overlay-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add fork-ts-checker-async-overlay-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; this plugin integrates with it to show type checking errors in the dev server overlay.","package":"fork-ts-checker-webpack-plugin","optional":false}],"imports":[{"note":"CJS only; no default ES module export available.","wrong":"import ForkTsCheckerAsyncOverlayWebpackPlugin from 'fork-ts-checker-async-overlay-webpack-plugin'","symbol":"default","correct":"const ForkTsCheckerAsyncOverlayWebpackPlugin = require('fork-ts-checker-async-overlay-webpack-plugin')"},{"note":"Use the require form. The package does not export named symbols.","wrong":null,"symbol":"ForkTsCheckerAsyncOverlayWebpackPlugin","correct":"const ForkTsCheckerAsyncOverlayWebpackPlugin = require('fork-ts-checker-async-overlay-webpack-plugin')"}],"quickstart":{"code":"const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\nconst ForkTsCheckerAsyncOverlayWebpackPlugin = require('fork-ts-checker-async-overlay-webpack-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        use: {\n          loader: 'ts-loader',\n          options: { transpileOnly: true }\n        },\n        exclude: /node_modules/\n      }\n    ]\n  },\n  plugins: [].concat(\n    new ForkTsCheckerAsyncOverlayWebpackPlugin({\n      checkerPlugin: new ForkTsCheckerWebpackPlugin()\n    }).plugins()\n  ),\n  devServer: {\n    overlay: true,\n    inline: true\n  }\n};","lang":"javascript","description":"Configures webpack with ts-loader (transpileOnly), fork-ts-checker-webpack-plugin, and this plugin to show type errors in dev server overlay."},"warnings":[{"fix":"Use fork-ts-checker-webpack-plugin's built-in warning reporting or no overlay for warnings.","message":"Only errors (not warnings) are shown in overlay.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Set devServer: { overlay: true, inline: true } in webpack config.","message":"The plugin requires devServer.overlay to be true and devServer.inline to be true.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Expected behavior; no workaround.","message":"The plugin only re-fires the done hook if there are errors; otherwise the overlay is not updated.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Pin fork-ts-checker-webpack-plugin to ^4.1.6 and monitor for updates.","message":"Major version 0.x: API may change without notice. Peer dependency on fork-ts-checker-webpack-plugin ^4.1.6 may not be compatible with newer versions.","severity":"breaking","affected_versions":">=0.0.0 <1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure devServer config has overlay: true and inline: true, and call .plugins() on the plugin instance.","cause":"Missing devServer.overlay: true or devServer.inline: true, or missing .plugins() call.","error":"Type errors not showing in overlay even though fork-ts-checker-webpack-plugin reports them"},{"fix":"Run 'npm install fork-ts-checker-async-overlay-webpack-plugin --save-dev'.","cause":"Package not installed or not in node_modules.","error":"Cannot find module 'fork-ts-checker-async-overlay-webpack-plugin'"},{"fix":"Use require() instead of import: const ForkTsCheckerAsyncOverlayWebpackPlugin = require('fork-ts-checker-async-overlay-webpack-plugin');","cause":"Using ES module import syntax instead of require.","error":"TypeError: ForkTsCheckerAsyncOverlayWebpackPlugin is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}