{"id":20105,"library":"html-render-webpack-plugin","title":"html-render-webpack-plugin","description":"Webpack plugin (v3.0.2, latest) for rendering static HTML files using JavaScript, designed for multi-config webpack builds. Supports code-splitting, dynamic imports, and asset injection from separate webpack compilation stats. Differentiates from html-webpack-plugin by supporting multiple configurations (e.g., one for browser assets, one for node rendering) and allowing custom render functions with access to webpack stats. Requires webpack 5 (v3.x) and express as a peer dependency. Active development with recent maintenance updates.","status":"active","version":"3.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/jahredhope/html-render-webpack-plugin","tags":["javascript","html","static","plugin","webpack"],"install":[{"cmd":"npm install html-render-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-render-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-render-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used internally to run a local express server for rendering HTML during the webpack build process.","package":"express","optional":false}],"imports":[{"note":"Since v3.0.0, the plugin is exported as both named and default export. CommonJS require must use destructuring (e.g., const { HtmlRenderPlugin } = require('html-render-webpack-plugin')).","wrong":"const HtmlRenderPlugin = require('html-render-webpack-plugin')","symbol":"HtmlRenderPlugin","correct":"import { HtmlRenderPlugin } from 'html-render-webpack-plugin'"},{"note":"Default export is available since v3.0.0 for ESM imports. Both named and default export work.","wrong":"const HtmlRenderPlugin = require('html-render-webpack-plugin').default","symbol":"default (HtmlRenderPlugin)","correct":"import HtmlRenderPlugin from 'html-render-webpack-plugin'"},{"note":"The instance provides .rendererPlugin and .statsCollectorPlugin. Not the instance itself.","wrong":"module.exports.plugins = [new HtmlRenderPlugin()] // This adds the whole instance as a plugin, which is incorrect","symbol":"HtmlRenderPlugin instance","correct":"const htmlRenderPlugin = new HtmlRenderPlugin();\nmodule.exports.plugins = [htmlRenderPlugin.rendererPlugin]"}],"quickstart":{"code":"// webpack.config.js (single config)\nconst { HtmlRenderPlugin } = require('html-render-webpack-plugin');\n\n// Your render function (src/render.js)\n// export default ({ assetsByChunkName }) => ``;\n\nmodule.exports = {\n entry: {\n main: './src/index.js',\n render: './src/render.js'\n },\n target: 'node', // because render runs in node\n plugins: [\n new HtmlRenderPlugin().rendererPlugin\n ]\n};","lang":"javascript","description":"Shows a minimal single-config setup for html-render-webpack-plugin with a render function entry."},"warnings":[{"fix":"Use `const { HtmlRenderPlugin } = require('html-render-webpack-plugin');`","message":"v3.0.0 changed the plugin export from default to named export. CommonJS require destructuring is required.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade to webpack 5 or use v2.x (html-render-webpack-plugin@2)","message":"v3.0.0 supports webpack 5 only; webpack 4 support dropped.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Create an instance and use `.rendererPlugin` for the rendering config, `.statsCollectorPlugin` for stats collection in other configs.","message":"Do not pass the HtmlRenderPlugin instance directly to plugins array; use .rendererPlugin or .statsCollectorPlugin.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Run `npm install express` or add it to your project dependencies.","message":"The plugin uses express as a peer dependency; not installing it will cause runtime errors.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use `new HtmlRenderPlugin().rendererPlugin` instead.","message":"The `render` property on the instance (e.g., `new HtmlRenderPlugin().render`) is deprecated in favor of `.rendererPlugin`.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install html-render-webpack-plugin`.","cause":"Plugin not installed or not resolved in node_modules.","error":"Error: Cannot find module 'html-render-webpack-plugin'"},{"fix":"Change `const HtmlRenderPlugin = require('html-render-webpack-plugin')` to `const { HtmlRenderPlugin } = require('html-render-webpack-plugin')`.","cause":"Using CommonJS require without destructuring after v3.0.0.","error":"TypeError: HtmlRenderPlugin is not a constructor"},{"fix":"Create separate instances for each config or use .statsCollectorPlugin for additional configs.","cause":"Adding the same plugin instance to multiple webpack configs incorrectly.","error":"Error: Plugin tried to add itself twice with the same name 'HtmlRenderPlugin'"},{"fix":"Add `htmlRenderPlugin.statsCollectorPlugin` to the client config's plugins list.","cause":"Render function expects assetsByChunkName but no stats collector plugin was added.","error":"Error: Cannot read property 'main' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}