Registry / web-framework / error-overlay-webpack-plugin

error-overlay-webpack-plugin

library1.1.1jsnpmunverified

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.

web-framework devops

npm install error-overlay-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · ERROR-OVERLAY-WEBP

error-overlay-webpack-plugin

web-frameworkjavascriptv1.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ErrorOverlayPlugin

✓ const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')

✗ import ErrorOverlayPlugin from 'error-overlay-webpack-plugin'

Package does not export ESM; use CommonJS require in webpack config.

ErrorOverlayPlugin

✓ const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')

Default export is the plugin class.

webpack

✓ const webpack = require('webpack')

webpack is a peer dependency; must be installed separately.

Basic setup of error-overlay-webpack-plugin with Webpack 5, devtool configuration, and dev server.

// webpack.config.js const ErrorOverlayPlugin = require('error-overlay-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'bundle.js' }, devtool: 'cheap-module-source-map', plugins: [new ErrorOverlayPlugin()], devServer: { hot: true } }; // package.json // { // "scripts": { "dev": "webpack serve" }, // "devDependencies": { // "webpack": "^5.0.0", // "webpack-cli": "^4.0.0", // "webpack-dev-server": "^3.0.0 || ^4.0.0", // "error-overlay-webpack-plugin": "^1.1.1" // } // }

Debug

Known issues

gotchaPlugin requires 'cheap-module-source-map' devtool; using 'eval' will cause the overlay to not display errors properly.

fix

Set devtool to 'cheap-module-source-map' in webpack config.

affects: >=0.1.0

gotchaOptions object property 'before' was renamed or removed in v1.1.0; using it causes 'unknown property' error.

fix

Do not pass 'before' option; use webpack-dev-server's 'onBeforeSetupMiddleware' instead.

affects: >=1.1.0

breakingv1.0.0 dropped support for Webpack 4 (though later versions declare peer dep on webpack ^4.0.0 || ^5.0.0). Check compatibility.

fix

Upgrade to v1.1.1 for Webpack 4 support or use v0.4.2 if Webpack 4 needed.

affects: 1.0.0

gotchaIf using webpack-dev-middleware without webpack-dev-server, the socket listener must be manually configured; otherwise overlay won't update.

fix

Pass custom sockHost/sockPath/sockPort options to the plugin, or use webpack-dev-server.

affects: >=0.2.0

Errors

Common errors & fixes

Options has an unknown property 'before'

Using 'before' option with plugin version >=1.1.0 which removed or renamed it.

fix

Remove 'before' from plugin options. Use webpack-dev-server's 'onBeforeSetupMiddleware' instead.

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

Common webpack configuration warning; not specific to this plugin but often appears together.

fix

Set 'mode' to 'development' in webpack config.

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/gregberge/error-overlay-webpack-plugin ↗

packagehttps://www.npmjs.com/package/error-overlay-webpack-plugin ↗