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,"search_vec":"'2022':63 '5':33 'add':34 'browser':12 'build':8 'cadenc':58 'cat':17 'dep':50 'display':7 'elimin':19 'hot':44 'html':28,39,53 'html-webpack-plugin':27,52 'htmlprogressindicatorplugin':1 'indic':18 'insid':10 'javascript':64 'last':60 'need':21 'nov':62 'output':25 'page':13 'peer':49 'plugin':4,30,55 'progress':9,42 'releas':57,61 'reload':45 'requir':26 'script':36 'ship':46 'show':41 'sporad':59 'termin':24 'toast/nyan':16 'type':48 'types/webpack':51 'typescript':47,65 'v0.4.0':5 'watch':23 'webpack':3,29,32,54,56","created_at":"2026-04-25T11:21:20.673736+00:00","updated_at":"2026-04-25T11:21:20.673736+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/hipstersmoothie/html-progress-indicator-plugin","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/html-progress-indicator-plugin","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops","web-framework","serialization"],"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}}