webpack-hud

library0.1.2jsnpmunverified

Webpack HUD is a lightweight development tool that displays webpack compilation errors and warnings as a heads-up display (HUD) overlay in the browser. Current stable version is 0.1.2, with low release cadence. It works by opening a separate SockJS channel to listen to webpack compilation results and appending an overlay element to the body. Unlike full-featured error overlays like webpack-error-notification, it provides a minimal, non-intrusive UI focused solely on error display. Supports webpack-dev-server and hot module replacement.

devops

npm install webpack-hud

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-HUD

webpack-hud

devopsjavascriptv0.1.2

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.

default

✓ import 'webpack-hud';

✗ import webpackHud from 'webpack-hud';

Import the package as a side-effect entry in your webpack entry array, no default export is provided.

default

✓ require('webpack-hud');

✗ const webpackHud = require('webpack-hud');

Require the package as a side-effect for CommonJS projects.

entry configuration

✓ entry: { main: ['webpack-hud', './src/main'] }

✗ entry: { main: './src/main' }

The package must be added to the beginning of your entry array before your own code.

Configures webpack to use webpack-hud by adding it to the entry array before the app code.

// webpack.config.js module.exports = { entry: { main: [ 'webpack-hud', './src/main', ], }, output: { filename: 'bundle.js', path: __dirname + '/build', }, devServer: { hot: true, port: 8080, }, };

webpack-hud --version

Debug

Known issues

gotchaWebpack HUD must be added to the entry array before your application code, otherwise errors from your code may not be captured.

fix

Ensure 'webpack-hud' is listed first in the entry array.

affects: >=0.0.0

gotchaThe package is not compatible with webpack 5? (no explicit checking) - may require webpack-dev-server v3 or earlier.

fix

Use with webpack-dev-server v3 or test compatibility with your version.

affects: >=0.0.0

deprecatedThe package uses SockJS internally, which may conflict with other SockJS connections or custom webpack-dev-server transports.

fix

Consider alternatives if you need custom transport or have multiple SockJS channels.

affects: >=0.0.0

gotchaOnly supports webpack-dev-server; does not work with other dev servers or production builds.

fix

Remove the import from production config.

affects: >=0.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'webpack-hud'

Package not installed or import path incorrect.

fix

npm install --save-dev webpack-hud and verify the import string is exactly 'webpack-hud'.

Uncaught TypeError: Cannot read property 'prototype' of undefined

Incompatible SockJS client version or duplicate SockJS instances.

fix

Ensure you are not also manually adding SockJS to your bundle. Check for version conflicts.

Invalid entry: entry.main[0] is not a string

Entry configuration is malformed; webpack-hud should be a string in the entry array.

fix

Correct webpack config: entry: { main: ['webpack-hud', './src/main'] }

Upgrade

Version history

0.1.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/mvc-works/webpack-hud ↗

packagehttps://www.npmjs.com/package/webpack-hud ↗