Registry /
devops / html-progress-indicator-plugin
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
HtmlProgressIndicatorPlugin
✓ import { HtmlProgressIndicatorPlugin } from 'html-progress-indicator-plugin'
✗ const HtmlProgressIndicatorPlugin = require('html-progress-indicator-plugin')
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.
MSG_ID
✓ import { MSG_ID } from 'html-progress-indicator-plugin'
Exported constant for custom template ID placeholder.
PROGRESS_ID
✓ import { PROGRESS_ID } from 'html-progress-indicator-plugin'
Exported constant for custom template ID placeholder.
Configures webpack with HtmlWebpackPlugin and HtmlProgressIndicatorPlugin, and adds the required placeholder comment in the HTML template.
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { HtmlProgressIndicatorPlugin } = require('html-progress-indicator-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: { filename: 'bundle.js' },
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new HtmlProgressIndicatorPlugin(),
],
};
// src/index.html
<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
<div id="app"></div>
<!-- reload-indicator-placeholder -->
</body>
</html>
Errors
Common errors & fixes
Error: HtmlProgressIndicatorPlugin is not a constructor
Importing default instead of named export
fixUse const { HtmlProgressIndicatorPlugin } = require('html-progress-indicator-plugin') TypeError: Cannot read property 'hooks' of undefined
HtmlWebpackPlugin not added before HtmlProgressIndicatorPlugin
fixAdd new HtmlWebpackPlugin() before new HtmlProgressIndicatorPlugin() in plugins array
The progress indicator does not appear in the browser
Missing placeholder comment in HTML template
fixEnsure <!-- reload-indicator-placeholder --> is inside the <body> tag of your HTML file
Audit
Dependencies
html-webpack-pluginrequiredrequired as peer dependency; plugin injects progress indicator into HTML generated by html-webpack-plugin
webpackrequiredpeer dependency; plugin is a webpack plugin
@types/webpackoptionaltype definitions for webpack; dev dependency for TypeScript projects