rollup-plugin-html

0.2.1 verified Mon Apr 27 auth: no javascript maintenance

A Rollup plugin that imports HTML files as JavaScript string variables. Version 0.2.1 is the latest stable release, though the project appears to be in maintenance mode with no recent updates. It uses rollup-pluginutils for file filtering and integrates with html-minifier for optional minification. Differentiators: simple API, support for include/exclude glob patterns, and opt-in HTML minification via html-minifier options. Alternatives like @rollup/plugin-html or vite-plugin-html offer more features.

Common errors

error Error: Could not resolve module 'rollup-plugin-html' ↓

cause Package not installed or incorrect import path.

fix

Run npm install --save-dev rollup-plugin-html and ensure correct import syntax.

error TypeError: html is not a function ↓

cause Using named import instead of default import.

fix

Use import html from 'rollup-plugin-html' rather than import { html } from 'rollup-plugin-html'.

error ReferenceError: html is not defined ↓

cause Plugin not included in rollup config plugins array.

fix

Add html() to the plugins array in rollup.config.js.

Warnings

deprecated The package is in maintenance mode; no recent updates and may not work with Rollup 3+. ↓

fix Consider migrating to @rollup/plugin-html or use vite-plugin-html for modern builds.

gotcha The plugin does not handle SVG files or non-HTML XML; only .html extensions. ↓

fix Use a separate plugin for SVG or XML imports.

gotcha htmlMinifierOptions are passed directly to html-minifier; invalid options may cause errors. ↓

fix Ensure options match html-minifier documentation.

gotcha The include default is '**/*.html' but excludes node_modules by default; custom include patterns must explicitly include node_modules if needed. ↓

fix Set include option to include node_modules: include: ['**/*.html', 'node_modules/**/*.html']

Install

npm install rollup-plugin-html

yarn add rollup-plugin-html

pnpm add rollup-plugin-html

Imports

default

wrong

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

correct

import html from 'rollup-plugin-html'

ESM default export. CJS require works but returns default export.

html

wrong

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

correct

import html from 'rollup-plugin-html'

Named import 'html' does not exist; only default export.

rollup-plugin-html

wrong

const { default: html } = require('rollup-plugin-html')

correct

const html = require('rollup-plugin-html');

In CJS, require returns the default export directly.

Quickstart

Shows how to configure rollup-plugin-html in a rollup config and import an HTML file as a string.

// rollup.config.js
import html from 'rollup-plugin-html';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    html({
      include: '**/*.html',
      exclude: '**/excluded.html',
      htmlMinifierOptions: {
        collapseWhitespace: true
      }
    })
  ]
};

// main.js
import template from './template.html';
document.body.innerHTML = template;