Webpack HUD

0.1.2 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

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

cause Package not installed or import path incorrect.

fix

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

error Uncaught TypeError: Cannot read property 'prototype' of undefined ↓

cause Incompatible SockJS client version or duplicate SockJS instances.

fix

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

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

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

fix

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

Warnings

gotcha Webpack 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.

gotcha The 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.

deprecated The 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.

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

fix Remove the import from production config.

Install

npm install webpack-hud

yarn add webpack-hud

pnpm add webpack-hud

Imports

default
wrong
```
import webpackHud from 'webpack-hud';
```
correct
```
import 'webpack-hud';
```
Import the package as a side-effect entry in your webpack entry array, no default export is provided.
default
wrong
```
const webpackHud = require('webpack-hud');
```
correct
```
require('webpack-hud');
```
Require the package as a side-effect for CommonJS projects.
entry configuration
wrong
```
entry: { main: './src/main' }
```
correct
```
entry: { main: ['webpack-hud', './src/main'] }
```
The package must be added to the beginning of your entry array before your own code.

Quickstart

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,
  },
};