html-render-webpack-plugin

3.0.2 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'html-render-webpack-plugin' ↓

cause Plugin not installed or not resolved in node_modules.

fix

Run npm install html-render-webpack-plugin.

error TypeError: HtmlRenderPlugin is not a constructor ↓

cause Using CommonJS require without destructuring after v3.0.0.

fix

Change const HtmlRenderPlugin = require('html-render-webpack-plugin') to const { HtmlRenderPlugin } = require('html-render-webpack-plugin').

error Error: Plugin tried to add itself twice with the same name 'HtmlRenderPlugin' ↓

cause Adding the same plugin instance to multiple webpack configs incorrectly.

fix

Create separate instances for each config or use .statsCollectorPlugin for additional configs.

error Error: Cannot read property 'main' of undefined ↓

cause Render function expects assetsByChunkName but no stats collector plugin was added.

fix

Add htmlRenderPlugin.statsCollectorPlugin to the client config's plugins list.

Warnings

breaking v3.0.0 changed the plugin export from default to named export. CommonJS require destructuring is required. ↓

fix Use `const { HtmlRenderPlugin } = require('html-render-webpack-plugin');`

breaking v3.0.0 supports webpack 5 only; webpack 4 support dropped. ↓

fix Upgrade to webpack 5 or use v2.x (html-render-webpack-plugin@2)

gotcha Do not pass the HtmlRenderPlugin instance directly to plugins array; use .rendererPlugin or .statsCollectorPlugin. ↓

fix Create an instance and use `.rendererPlugin` for the rendering config, `.statsCollectorPlugin` for stats collection in other configs.

gotcha The plugin uses express as a peer dependency; not installing it will cause runtime errors. ↓

fix Run `npm install express` or add it to your project dependencies.

deprecated The `render` property on the instance (e.g., `new HtmlRenderPlugin().render`) is deprecated in favor of `.rendererPlugin`. ↓

fix Use `new HtmlRenderPlugin().rendererPlugin` instead.

Install

npm install html-render-webpack-plugin

yarn add html-render-webpack-plugin

pnpm add html-render-webpack-plugin

Imports

HtmlRenderPlugin
wrong
```
const HtmlRenderPlugin = require('html-render-webpack-plugin')
```
correct
```
import { HtmlRenderPlugin } from 'html-render-webpack-plugin'
```
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')).

default (HtmlRenderPlugin)

wrong

const HtmlRenderPlugin = require('html-render-webpack-plugin').default

correct

import HtmlRenderPlugin from 'html-render-webpack-plugin'

Default export is available since v3.0.0 for ESM imports. Both named and default export work.

HtmlRenderPlugin instance

wrong

module.exports.plugins = [new HtmlRenderPlugin()] // This adds the whole instance as a plugin, which is incorrect

correct

const htmlRenderPlugin = new HtmlRenderPlugin();
module.exports.plugins = [htmlRenderPlugin.rendererPlugin]

The instance provides .rendererPlugin and .statsCollectorPlugin. Not the instance itself.

Quickstart

Shows a minimal single-config setup for html-render-webpack-plugin with a render function entry.

// webpack.config.js (single config)
const { HtmlRenderPlugin } = require('html-render-webpack-plugin');

// Your render function (src/render.js)
// export default ({ assetsByChunkName }) => `<html><body><script src="${assetsByChunkName.main}"></script></body></html>`;

module.exports = {
  entry: {
    main: './src/index.js',
    render: './src/render.js'
  },
  target: 'node', // because render runs in node
  plugins: [
    new HtmlRenderPlugin().rendererPlugin
  ]
};