{"id":20775,"library":"webpack-hud","title":"Webpack HUD","description":"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.","status":"maintenance","version":"0.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/mvc-works/webpack-hud","tags":["javascript","webpack","devserver","errors","hud"],"install":[{"cmd":"npm install webpack-hud","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-hud","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-hud","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Import the package as a side-effect entry in your webpack entry array, no default export is provided.","wrong":"import webpackHud from 'webpack-hud';","symbol":"default","correct":"import 'webpack-hud';"},{"note":"Require the package as a side-effect for CommonJS projects.","wrong":"const webpackHud = require('webpack-hud');","symbol":"default","correct":"require('webpack-hud');"},{"note":"The package must be added to the beginning of your entry array before your own code.","wrong":"entry: { main: './src/main' }","symbol":"entry configuration","correct":"entry: { main: ['webpack-hud', './src/main'] }"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  entry: {\n    main: [\n      'webpack-hud',\n      './src/main',\n    ],\n  },\n  output: {\n    filename: 'bundle.js',\n    path: __dirname + '/build',\n  },\n  devServer: {\n    hot: true,\n    port: 8080,\n  },\n};","lang":"javascript","description":"Configures webpack to use webpack-hud by adding it to the entry array before the app code."},"warnings":[{"fix":"Ensure 'webpack-hud' is listed first in the entry array.","message":"Webpack HUD must be added to the entry array before your application code, otherwise errors from your code may not be captured.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use with webpack-dev-server v3 or test compatibility with your version.","message":"The package is not compatible with webpack 5? (no explicit checking) - may require webpack-dev-server v3 or earlier.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Consider alternatives if you need custom transport or have multiple SockJS channels.","message":"The package uses SockJS internally, which may conflict with other SockJS connections or custom webpack-dev-server transports.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Remove the import from production config.","message":"Only supports webpack-dev-server; does not work with other dev servers or production builds.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev webpack-hud and verify the import string is exactly 'webpack-hud'.","cause":"Package not installed or import path incorrect.","error":"Module not found: Error: Can't resolve 'webpack-hud'"},{"fix":"Ensure you are not also manually adding SockJS to your bundle. Check for version conflicts.","cause":"Incompatible SockJS client version or duplicate SockJS instances.","error":"Uncaught TypeError: Cannot read property 'prototype' of undefined"},{"fix":"Correct webpack config: entry: { main: ['webpack-hud', './src/main'] }","cause":"Entry configuration is malformed; webpack-hud should be a string in the entry array.","error":"Invalid entry: entry.main[0] is not a string"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}