{"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,"search_vec":"'0.1.2':32 'append':52 'bodi':58 'browser':27 'cadenc':36 'channel':44 'compil':13,49 'current':28 'dev':86 'develop':8 'devserv':94 'display':11,22,82 'element':55 'error':14,63,68,81,95 'featur':62 'focus':78 'full':61 'full-featur':60 'head':20 'heads-up':19 'hot':89 'hud':2,4,23,96 'intrus':76 'javascript':92 'lightweight':7 'like':65 'listen':46 'low':34 'minim':73 'modul':90 'non':75 'non-intrus':74 'notif':69 'open':40 'overlay':24,54,64 'provid':71 'releas':35 'replac':91 'result':50 'separ':42 'server':87 'sockj':43 'sole':79 'stabl':29 'support':83 'tool':9 'ui':77 'unlik':59 'version':30 'warn':16 'webpack':1,3,12,48,67,85,93 'webpack-dev-serv':84 'webpack-error-notif':66 'work':38","created_at":"2026-04-25T11:24:54.838951+00:00","updated_at":"2026-04-25T11:24:54.838951+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"webpack-hud","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/mvc-works/webpack-hud","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/webpack-hud","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}