My App

{"id":20104,"library":"html-progress-indicator-plugin","title":"HtmlProgressIndicatorPlugin","description":"A webpack plugin (v0.4.0) that displays build progress inside the browser page as a toast/nyan cat indicator, eliminating the need to watch terminal output. Requires html-webpack-plugin and webpack 5. Adds a script into the HTML to show progress during hot reloads. Ships TypeScript types. Peer deps: @types/webpack, html-webpack-plugin, webpack. Release cadence: sporadic, last release Nov 2022.","status":"active","version":"0.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/hipstersmoothie/html-progress-indicator-plugin","tags":["javascript","typescript"],"install":[{"cmd":"npm install html-progress-indicator-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-progress-indicator-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-progress-indicator-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required as peer dependency; plugin injects progress indicator into HTML generated by html-webpack-plugin","package":"html-webpack-plugin","optional":false},{"reason":"peer dependency; plugin is a webpack plugin","package":"webpack","optional":false},{"reason":"type definitions for webpack; dev dependency for TypeScript projects","package":"@types/webpack","optional":true}],"imports":[{"note":"ESM-only since v0.4.0? Package.json has no 'type':'module' but uses ESM syntax? Actually it uses CJS require in examples; but the import works if bundler supports ESM. The 'wrong' pattern is using default import (import X from '...') which doesn't exist.","wrong":"const HtmlProgressIndicatorPlugin = require('html-progress-indicator-plugin')","symbol":"HtmlProgressIndicatorPlugin","correct":"import { HtmlProgressIndicatorPlugin } from 'html-progress-indicator-plugin'"},{"note":"Exported constant for custom template ID placeholder.","wrong":"","symbol":"MSG_ID","correct":"import { MSG_ID } from 'html-progress-indicator-plugin'"},{"note":"Exported constant for custom template ID placeholder.","wrong":"","symbol":"PROGRESS_ID","correct":"import { PROGRESS_ID } from 'html-progress-indicator-plugin'"}],"quickstart":{"code":"// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { HtmlProgressIndicatorPlugin } = require('html-progress-indicator-plugin');\n\nmodule.exports = {\n mode: 'development',\n entry: './src/index.js',\n output: { filename: 'bundle.js' },\n plugins: [\n new HtmlWebpackPlugin({\n template: './src/index.html',\n }),\n new HtmlProgressIndicatorPlugin(),\n ],\n};\n\n// src/index.html\n\n\nMy App\n\n

\n \n\n","lang":"javascript","description":"Configures webpack with HtmlWebpackPlugin and HtmlProgressIndicatorPlugin, and adds the required placeholder comment in the HTML template."},"warnings":[{"fix":"Ensure new HtmlProgressIndicatorPlugin() comes after new HtmlWebpackPlugin()","message":"Plugin must be added AFTER HtmlWebpackPlugin in the plugins array","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Add inside the of your HTML template else the indicator won't appear","message":"Placeholder comment is required in HTML template","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Specify placeholder option explicitly","message":"Default placeholder may be removed in future versions; use custom placeholder","severity":"deprecated","affected_versions":">=0.3.0"},{"fix":"Upgrade webpack to v5 or use an older version of the plugin","message":"Only works with webpack 5 (peer dependency)","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"Use html-webpack-plugin v5","message":"Requires html-webpack-plugin v5","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"Use Node.js 10 or later","message":"Node.js >=10 required","severity":"gotcha","affected_versions":">=0.4.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use const { HtmlProgressIndicatorPlugin } = require('html-progress-indicator-plugin')","cause":"Importing default instead of named export","error":"Error: HtmlProgressIndicatorPlugin is not a constructor"},{"fix":"Add new HtmlWebpackPlugin() before new HtmlProgressIndicatorPlugin() in plugins array","cause":"HtmlWebpackPlugin not added before HtmlProgressIndicatorPlugin","error":"TypeError: Cannot read property 'hooks' of undefined"},{"fix":"Ensure is inside the tag of your HTML file","cause":"Missing placeholder comment in HTML template","error":"The progress indicator does not appear in the browser"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}