{"id":20091,"library":"handlebars-template-loader","title":"handlebars-template-loader","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/emaphp/handlebars-template-loader","tags":["javascript","handlebars","template","webpack","loader"],"install":[{"cmd":"npm install handlebars-template-loader","lang":"bash","label":"npm"},{"cmd":"yarn add handlebars-template-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add handlebars-template-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the loader compiles .hbs templates using Handlebars but does not include it in its own dependencies since v0.5.4","package":"handlebars","optional":false}],"imports":[{"note":"This package does not provide ESM exports; use CommonJS require in webpack config.","wrong":"import loader from 'handlebars-template-loader'","symbol":"default","correct":"require('handlebars-template-loader')"},{"note":"Use the runtime module to get the same Handlebars instance used by the loader for registering helpers and partials.","wrong":"const Handlebars = require('handlebars')","symbol":"runtime","correct":"const Handlebars = require('handlebars-template-loader/runtime')"},{"note":"The compiled partial is a function; register it directly.","wrong":"Handlebars.registerPartial('name', require('path/to/_partial.hbs'))","symbol":"partial","correct":"const partial = require('path/to/my/_partial.hbs'); Handlebars.registerPartial('name', partial)"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      { test: /\\\\.hbs$/, loader: 'handlebars-template-loader' }\n    ]\n  },\n  node: { fs: 'empty' }\n};\n\n// app.js\nconst tmpl = require('./hello.hbs');\ndocument.body.innerHTML = tmpl({ name: 'World' });\n\n// hello.hbs\n<p>Hello {{name}}</p>","lang":"javascript","description":"Sets up the loader in webpack config and shows a basic template compilation and rendering."},"warnings":[{"fix":"Use webpack 4. For older webpack versions, use version 0.x.","message":"Version 1.0 only supports Webpack 4.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Run 'npm install handlebars --save' in your project.","message":"Handlebars is NOT bundled. You must install it separately (peer dependency).","severity":"gotcha","affected_versions":">=0.5.4"},{"fix":"Add 'node: { fs: \"empty\" }' to webpack config.","message":"The 'node.fs' must be set to 'empty' in webpack config to avoid errors.","severity":"gotcha","affected_versions":"all"},{"fix":"Set 'query: { root: __dirname }' or use relative paths.","message":"Images with absolute paths are not translated unless 'root' option is defined.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install handlebars'","cause":"Handlebars is not installed; it's a peer dependency since v0.5.4.","error":"Error: Cannot find module 'handlebars'"},{"fix":"Add 'node: { fs: \"empty\" }' to webpack config.","cause":"Webpack tries to bundle Node.js 'fs' module, which is not available in browser.","error":"Error: Module not found: Error: Can't resolve 'fs'"},{"fix":"Use 'const Handlebars = require('handlebars-template-loader/runtime')'","cause":"Using 'require('handlebars')' directly instead of the loader's runtime module.","error":"Handlebars is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}