rollup-plugin-html2

4.0.0 verified Mon Apr 27 auth: no javascript

Rollup plugin to inject bundled JavaScript/CSS files into an HTML template. Current stable version is 4.0.0. It reads output from Rollup's bundle rather than scanning the file system, and emits the HTML as an asset for other plugins to use. Supports customization via template, filename, title, meta tags, and asset injection order. Requires Rollup >=3.0 and has an optional peer dependency on html-minifier. Licensed under MIT.

Common errors

error Error: The plugin 'rollup-plugin-html2' is not compatible with Rollup <3.0 ↓

cause Using rollup-plugin-html2 version >=3.0.0 with an older Rollup version

fix

Upgrade Rollup to version 3 or higher, or downgrade rollup-plugin-html2 to v2.x.

error TypeError: html2 is not a function ↓

cause Importing as a named export instead of default export

fix

Use import html2 from 'rollup-plugin-html2' (default import) instead of import { html2 } from 'rollup-plugin-html2'.

error Error: Could not resolve 'rollup-plugin-html2' ↓

cause Package not installed or imported incorrectly in a CommonJS context

fix

Run npm i -D rollup-plugin-html2 and ensure using the correct import (default import for ESM or const html2 = require('rollup-plugin-html2') for CJS).

Warnings

breaking Version 2.0.0 stopped prefixing file paths with '/' ↓

fix Update templates to not expect a leading slash in asset paths.

breaking Version 3.0.0 requires Rollup >=3.0 ↓

fix Upgrade Rollup to version 3 or later.

gotcha rollup-plugin-favicons must be placed before rollup-plugin-html2 in plugins array ↓

fix Reorder plugins: favicons first, then html2.

deprecated Options `inject` and `hash` are deprecated; use `fileName` and `publicPath` instead ↓

fix Replace `inject: true` with `inject: 'head'` and `hash: true` with a custom filename pattern.

Install

npm install rollup-plugin-html2

yarn add rollup-plugin-html2

pnpm add rollup-plugin-html2

Imports

html2

wrong

import { html2 } from 'rollup-plugin-html2'

correct

import html2 from 'rollup-plugin-html2'

Default export, not named.

default

wrong

const { html2 } = require('rollup-plugin-html2')

correct

const html2 = require('rollup-plugin-html2')

For CJS via require, use default import pattern.

PluginOptions

wrong

import { PluginOptions } from 'rollup-plugin-html2'

correct

import type { PluginOptions } from 'rollup-plugin-html2'

Type import only, not a runtime value.

Quickstart

Shows basic integration: import the default export and use it in a Rollup config with a custom template and output filename.

import html2 from 'rollup-plugin-html2';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [
    html2({
      template: 'src/template.html',
      filename: 'index.html',
      title: 'My App',
    }),
  ],
};