{"id":20090,"library":"handlebars-loader","title":"handlebars-loader","description":"A webpack loader for Handlebars templates that automatically resolves partials and helpers relative to the current file or via module prefixes. Version 1.7.3 is stable with infrequent releases; supports Handlebars 3.x and 4.x. Differentiators include automatic resolution, inline require support, and configurable directories for helpers/partials. Notable: v1.7.3 updates loader-utils dependency to address security vulnerabilities.","status":"active","version":"1.7.3","language":"javascript","source_language":"en","source_url":"git://github.com/pcardune/handlebars-loader","tags":["javascript"],"install":[{"cmd":"npm install handlebars-loader","lang":"bash","label":"npm"},{"cmd":"yarn add handlebars-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add handlebars-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; runtime used by generated templates.","package":"handlebars","optional":false},{"reason":"Required by webpack loaders for utility functions.","package":"loader-utils","optional":false}],"imports":[{"note":"Use ESM import syntax with webpack 2+.","wrong":"const template = require('./file.handlebars');","symbol":"default","correct":"import template from './file.handlebars';"},{"note":"Webpack 2+ uses 'rules' instead of 'loaders'.","wrong":"module.exports = { module: { loaders: [ { test: /\\.handlebars$/, loader: 'handlebars-loader' } ] } };","symbol":"default (for webpack config)","correct":"module.exports = { module: { rules: [ { test: /\\.handlebars$/, loader: 'handlebars-loader' } ] } };"},{"note":"Do not import the loader in your entry files; it's used internally by webpack.","wrong":"import handlebarsLoader from 'handlebars-loader';","symbol":"no direct import","correct":"This loader is not imported directly by user code; it is referenced in webpack config."}],"quickstart":{"code":"npm install handlebars-loader handlebars --save-dev\n\n// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.handlebars$/,\n        loader: 'handlebars-loader',\n        options: {\n          knownHelpers: ['if', 'unless', 'each', 'with', 'lookup'],\n          helperDirs: ['/path/to/helpers'],\n          partialDirs: ['/path/to/partials'],\n          debug: true\n        }\n      }\n    ]\n  }\n};\n\n// entry.js\nconst template = require('./template.handlebars');\ndocument.body.innerHTML = template({ name: 'World' });","lang":"javascript","description":"Shows installation, webpack configuration with common options, and usage of a Handlebars template in a JavaScript entry file."},"warnings":[{"fix":"Use `use: 'handlebars-loader'` or `loader: 'handlebars-loader'` inside a `use` array.","message":"Webpack 4+ removed the deprecated `loader` property in favor of `use` in module rules.","severity":"breaking","affected_versions":">=1.7.0"},{"fix":"Set `esModule: false` in your file-loader config or use `type: 'javascript/auto'` for asset modules.","message":"The `inlineRequires` option requires disabling `esModule` in file-loader/webpack5 asset modules.","severity":"deprecated","affected_versions":">=1.5.0"},{"fix":"Use `{{> $module/partial}}` for node_modules partials, or set `rootRelative` option.","message":"Partials and helpers are resolved relative to the current template unless prefixed with `$` to denote a module.","severity":"gotcha","affected_versions":"all"},{"fix":"Update webpack config to use `module.rules` array.","message":"Upgrading from webpack 1 to 2+ requires changing `loaders` key to `rules` and `loader` to `use`.","severity":"breaking","affected_versions":">=1.4.0"}],"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 --save-dev`.","cause":"Handlebars is a peer dependency and must be installed separately.","error":"Module not found: Error: Can't resolve 'handlebars'"},{"fix":"Ensure your webpack config has a rule with `test: /\\.handlebars$/` and `loader: 'handlebars-loader'`.","cause":"The loader is not correctly configured in webpack, or the test regex does not match the file extension.","error":"ERROR in ./template.handlebars 1:0 Module parse failed: Unexpected token (1:0)"},{"fix":"Set the `runtime` option explicitly: `options: { runtime: 'handlebars/dist/cjs/handlebars.runtime.js' }`.","cause":"The runtime path is not resolved correctly when using `runtime` option or default resolution fails.","error":"Cannot find module 'handlebars/runtime'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}