rollup-plugin-generate-html-template

1.7.0 verified Mon Apr 27 auth: no javascript

Rollup plugin that automatically injects script and link tags for the final bundle into an HTML template. Current stable version is 1.7.0, with a low release cadence (last release in 2020). It simplifies HTML generation by inserting a <script> tag before </body> and a <link> tag before </head> based on the bundle output. Supports CSS injection, custom attributes, and variable replacement. Unlike more complex alternatives like rollup-plugin-html or @rollup/plugin-html, this focuses on template injection with minimal configuration.

Common errors

error TypeError: htmlTemplate is not a function ↓

cause Using a named import instead of default import.

fix

Change to import htmlTemplate from 'rollup-plugin-generate-html-template'.

error ENOENT: no such file or directory, open ... ↓

cause The output directory for the target HTML file does not exist.

fix

Create the directory manually or upgrade to v1.2.0+ which auto-creates directories.

error Error: Could not resolve entry module ↓

cause Using old `entry` option instead of `input`.

fix

Replace entry: 'src/index.js' with input: 'src/index.js'.

Warnings

breaking Version 1.0.0 changed the import from a named export to a default export. ↓

fix Update import from `import { generateHtmlTemplate } from 'rollup-plugin-generate-html-template'` to `import htmlTemplate from 'rollup-plugin-generate-html-template'`.

breaking Version 1.2.0 changed the plugin to inject all entry points instead of failing; dynamic imports are not embedded. ↓

fix If you relied on the plugin failing for multiple entry points, update your configuration to handle multiple script tags.

deprecated The `entry` and `dest` options from Rollup 0.x are not supported; use `input` and `output`. ↓

fix Use Rollup's `input` and `output` options as shown in the quickstart.

gotcha The plugin does not create the output directory automatically if it does not exist for the target file. ↓

fix Upgrade to v1.2.0+ or ensure the output directory exists before building.

gotcha CSS injection only works if the bundle generates a CSS file; the plugin assumes the same base name as the JS bundle. ↓

fix Ensure your Rollup output includes a CSS file matching the JS bundle name, or configure accordingly.

Install

npm install rollup-plugin-generate-html-template

yarn add rollup-plugin-generate-html-template

pnpm add rollup-plugin-generate-html-template

Imports

default

wrong

const htmlTemplate = require('rollup-plugin-generate-html-template')

correct

import htmlTemplate from 'rollup-plugin-generate-html-template'

ESM default import; CommonJS require works in Node but not recommended for Rollup configs.

htmlTemplate

wrong

import { htmlTemplate } from 'rollup-plugin-generate-html-template'

correct

import htmlTemplate from 'rollup-plugin-generate-html-template'

Named export does not exist; must use default import.

htmlTemplate (with destructured options)

wrong

import htmlTemplate from 'rollup-plugin-generate-html-template';
htmlTemplate.template({ template: 'src/template.html' })

correct

import htmlTemplate from 'rollup-plugin-generate-html-template';
htmlTemplate({ template: 'src/template.html', target: 'dist/index.html' })

The function is called directly; there is no static .template method.

Quickstart

Basic Rollup config using the plugin to inject bundle script and link tags into an HTML template.

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
  },
  plugins: [
    htmlTemplate({
      template: 'src/template.html',
      target: 'index.html',
    }),
  ],
};