Registry / web-framework / handlebars-template-loader

handlebars-template-loader

library1.1.0jsnpmunverified

A Handlebars template loader for Webpack. Current stable version is 1.1.0 (last updated 2024). It allows you to require .hbs files and use them as compiled templates, with support for helpers, partials, macros, and image loading. Key differentiators: includes macros like require, include, repeat; options for prepending filename comment for debugging; supports custom Handlebars runtime path. Release cadence is low, with infrequent updates. Note: does not bundle Handlebars, so you must install it separately.

web-framework

npm install handlebars-template-loader

github ↗package ↗

INSTALL

IMPORT

SIG · HANDLEBARS-TEMPLAT

handlebars-template-loader

web-frameworkjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ require('handlebars-template-loader')

✗ import loader from 'handlebars-template-loader'

This package does not provide ESM exports; use CommonJS require in webpack config.

runtime

✓ const Handlebars = require('handlebars-template-loader/runtime')

✗ const Handlebars = require('handlebars')

Use the runtime module to get the same Handlebars instance used by the loader for registering helpers and partials.

partial

✓ const partial = require('path/to/my/_partial.hbs'); Handlebars.registerPartial('name', partial)

✗ Handlebars.registerPartial('name', require('path/to/_partial.hbs'))

The compiled partial is a function; register it directly.

Sets up the loader in webpack config and shows a basic template compilation and rendering.

// webpack.config.js module.exports = { module: { rules: [ { test: /\\.hbs$/, loader: 'handlebars-template-loader' } ] }, node: { fs: 'empty' } }; // app.js const tmpl = require('./hello.hbs'); document.body.innerHTML = tmpl({ name: 'World' }); // hello.hbs <p>Hello {{name}}</p>

Debug

Known issues

breakingVersion 1.0 only supports Webpack 4.

fix

Use webpack 4. For older webpack versions, use version 0.x.

affects: >=1.0.0

gotchaHandlebars is NOT bundled. You must install it separately (peer dependency).

fix

Run 'npm install handlebars --save' in your project.

affects: >=0.5.4

gotchaThe 'node.fs' must be set to 'empty' in webpack config to avoid errors.

fix

Add 'node: { fs: "empty" }' to webpack config.

affects: all

gotchaImages with absolute paths are not translated unless 'root' option is defined.

fix

Set 'query: { root: __dirname }' or use relative paths.

affects: all

Errors

Common errors & fixes

Error: Cannot find module 'handlebars'

Handlebars is not installed; it's a peer dependency since v0.5.4.

fix

Run 'npm install handlebars'

Error: Module not found: Error: Can't resolve 'fs'

Webpack tries to bundle Node.js 'fs' module, which is not available in browser.

fix

Add 'node: { fs: "empty" }' to webpack config.

Handlebars is not defined

Using 'require('handlebars')' directly instead of the loader's runtime module.

fix

Use 'const Handlebars = require('handlebars-template-loader/runtime')'

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

handlebarsrequiredPeer dependency; the loader compiles .hbs templates using Handlebars but does not include it in its own dependencies since v0.5.4

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/emaphp/handlebars-template-loader ↗

packagehttps://www.npmjs.com/package/handlebars-template-loader ↗