{"id":19467,"library":"error-overlay-webpack-plugin","title":"error-overlay-webpack-plugin","description":"Webpack plugin that displays a full-screen error overlay in the browser during development, similar to create-react-app. Current stable version is 1.1.1, with sporadic releases for bug fixes. It supports Webpack 4 and 5, provides elegant stack traces, and allows clicking to open error lines in the editor. Key differentiator: seamless integration of the same error overlay used in CRA without ejecting, with support for custom sockHost/sockPath settings.","status":"active","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/gregberge/error-overlay-webpack-plugin","tags":["javascript","webpack","plugin","webpack-plugin","react","react-error-overlay","error-overlay"],"install":[{"cmd":"npm install error-overlay-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add error-overlay-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add error-overlay-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package does not export ESM; use CommonJS require in webpack config.","wrong":"import ErrorOverlayPlugin from 'error-overlay-webpack-plugin'","symbol":"ErrorOverlayPlugin","correct":"const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')"},{"note":"Default export is the plugin class.","symbol":"ErrorOverlayPlugin","correct":"const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')"},{"note":"webpack is a peer dependency; must be installed separately.","symbol":"webpack","correct":"const webpack = require('webpack')"}],"quickstart":{"code":"// webpack.config.js\nconst ErrorOverlayPlugin = require('error-overlay-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: { path: __dirname + '/dist', filename: 'bundle.js' },\n  devtool: 'cheap-module-source-map',\n  plugins: [new ErrorOverlayPlugin()],\n  devServer: { hot: true }\n};\n\n// package.json\n// {\n//   \"scripts\": { \"dev\": \"webpack serve\" },\n//   \"devDependencies\": {\n//     \"webpack\": \"^5.0.0\",\n//     \"webpack-cli\": \"^4.0.0\",\n//     \"webpack-dev-server\": \"^3.0.0 || ^4.0.0\",\n//     \"error-overlay-webpack-plugin\": \"^1.1.1\"\n//   }\n// }","lang":"javascript","description":"Basic setup of error-overlay-webpack-plugin with Webpack 5, devtool configuration, and dev server."},"warnings":[{"fix":"Set devtool to 'cheap-module-source-map' in webpack config.","message":"Plugin requires 'cheap-module-source-map' devtool; using 'eval' will cause the overlay to not display errors properly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Do not pass 'before' option; use webpack-dev-server's 'onBeforeSetupMiddleware' instead.","message":"Options object property 'before' was renamed or removed in v1.1.0; using it causes 'unknown property' error.","severity":"gotcha","affected_versions":">=1.1.0"},{"fix":"Upgrade to v1.1.1 for Webpack 4 support or use v0.4.2 if Webpack 4 needed.","message":"v1.0.0 dropped support for Webpack 4 (though later versions declare peer dep on webpack ^4.0.0 || ^5.0.0). Check compatibility.","severity":"breaking","affected_versions":"1.0.0"},{"fix":"Pass custom sockHost/sockPath/sockPort options to the plugin, or use webpack-dev-server.","message":"If using webpack-dev-middleware without webpack-dev-server, the socket listener must be manually configured; otherwise overlay won't update.","severity":"gotcha","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Remove 'before' from plugin options. Use webpack-dev-server's 'onBeforeSetupMiddleware' instead.","cause":"Using 'before' option with plugin version >=1.1.0 which removed or renamed it.","error":"Options has an unknown property 'before'"},{"fix":"Set 'mode' to 'development' in webpack config.","cause":"Common webpack configuration warning; not specific to this plugin but often appears together.","error":"The 'mode' option has not been set, webpack will fallback to 'production' for this value."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}