rollup-plugin-handlebars-plus

0.4.2 verified Mon Apr 27 auth: no javascript maintenance

Rollup plugin to precompile and resolve Handlebars templates, including support for partials, helpers, and optional rendering to jQuery collections. Current stable version is 0.4.2 (2020-09-09). The plugin integrates with Rollup's module system, allowing import of .hbs templates as ES6 modules, and precompiles templates so only the Handlebars runtime is needed. Key differentiators: includes Handlebars runtime, supports partial roots with rollup-plugin-root-import, and can render to jQuery objects directly. Requires rollup-plugin-node-resolve and rollup-plugin-commonjs for runtime support. Maintenance status: appears unmaintained since last release in 2020, with known security issues in older Handlebars versions.

Common errors

error Error: Could not resolve 'handlebars' (from ...) ↓

cause Missing rollup-plugin-node-resolve and rollup-plugin-commonjs to resolve the runtime.

fix

Add plugins: nodeResolve({ browser: true }), commonjs() to your rollup config.

error Error: Cannot find module 'handlebars' ↓

cause Handlebars runtime not installed or not in node_modules.

fix

Run: npm install handlebars

error TypeError: helpers is not a function ↓

cause Helper module does not export a function that accepts Handlebars as argument.

fix

Export default function(Handlebars) { ... } from your helper module.

error Error: Partial 'path/to/partial' not found ↓

cause partialRoot not set or incorrect paths.

fix

Set partialRoot to absolute directories containing partials; also register with rollup-plugin-root-import.

Warnings

deprecated Plugin has no updates since 2020; consider alternatives like @rollup/plugin-handlebars or vite-plugin-handlebars. ↓

fix Migrate to @rollup/plugin-handlebars or use a different bundler plugin.

breaking In version 0.4.0, the plugin requires the `handlebars` option object with `id` or `module`; omitting it breaks the build. ↓

fix Provide handlebars option: { id: 'handlebars' } or { module: require('handlebars') }.

gotcha If using helpers option, the helper module must export a function that accepts Handlebars runtime as argument, else it fails silently. ↓

fix Ensure helper modules export default function(Handlebars) { ... }.

deprecated The plugin includes a bundled Handlebars runtime that may be outdated; security vulnerabilities have been reported in older Handlebars versions. ↓

fix Update to >=0.4.1 which bumps handlebars dependency to 4.6.0, or provide custom handlebars via handlebars.module option.

Install

npm install rollup-plugin-handlebars-plus

yarn add rollup-plugin-handlebars-plus

pnpm add rollup-plugin-handlebars-plus

Imports

handlebars

wrong

const handlebars = require('rollup-plugin-handlebars-plus')

correct

import handlebars from 'rollup-plugin-handlebars-plus'

Default import is the plugin function. Works in both ESM and CJS environments.

handlebars

wrong

const { handlebars } = require('rollup-plugin-handlebars-plus')

correct

import { default as handlebars } from 'rollup-plugin-handlebars-plus'

Named export not available; use default import.

Template
wrong
```
const Template = require('./template.hbs')
```
correct
```
import Template from './template.hbs'
```
Imported templates are functions (precompiled). CJS require will not have the transformation unless wrapped.

Quickstart

Shows a basic rollup config using the plugin, importing a .hbs template and rendering it.

// main.js
import handlebars from 'rollup-plugin-handlebars-plus';
import rootImport from 'rollup-plugin-root-import';

// rollup.config.js
export default {
  input: 'main.js',
  plugins: [
    rootImport({
      root: [`${__dirname}/src/views`],
    }),
    handlebars({
      handlebars: {
        id: 'handlebars',
      },
      helpers: ['/utils/helpers.js'],
      partialRoot: [`${__dirname}/src/views`],
    }),
  ],
  output: {
    format: 'esm',
    file: 'bundle.js',
  },
};

// template.hbs
<h1>{{title}}</h1>

// Use in main.js
import tmpl from './template.hbs';
document.body.innerHTML = tmpl({title: 'Hello'});