{"id":27502,"library":"underscore-template-loader","title":"Underscore Template Loader","description":"Webpack loader that compiles Underscore.js or Lodash templates. Current stable version 1.2.0 supports Webpack 5. Low maintenance, no recent releases since 2021. Supports macros, template settings (interpolate/evaluate/escape), imports, and prepending filename comments for debugging. Works with file-loader and url-loader for image references. Key differentiator: enables using _.template and lodash templates as Webpack modules with additional macro features like @include and @require.","status":"maintenance","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/emaphp/underscore-template-loader","tags":["javascript","underscore","lodash","template","webpack","loader"],"install":[{"cmd":"npm install underscore-template-loader","lang":"bash","label":"npm"},{"cmd":"yarn add underscore-template-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add underscore-template-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Template compilation requires underscore or lodash at runtime","package":"underscore","optional":true},{"reason":"Alternative to underscore for template engine","package":"lodash","optional":true},{"reason":"Optional peer dependency for image loading in templates","package":"file-loader","optional":true},{"reason":"Alternate image loader (peer dependency)","package":"url-loader","optional":true}],"imports":[{"note":"CommonJS require also works but is outdated for modern ESM projects.","wrong":"const _ = require('underscore');","symbol":"underscore","correct":"import _ from 'underscore'"},{"note":"lodash can be used as engine; similar to underscore.","wrong":"const _ = require('lodash');","symbol":"lodash","correct":"import _ from 'lodash'"},{"note":"Loader returns a function; use default import for ESM.","wrong":"const tmpl = require('./template.html');","symbol":"compiled template","correct":"import tmpl from './template.html'"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      { test: /\\.html$/, loader: 'underscore-template-loader' },\n    ],\n  },\n};\n\n// template.html\n<p>Hello <%= name %></p>\n\n// app.js\nimport tmpl from './template.html';\nconst result = tmpl({ name: 'world' });\nconsole.log(result); // <p>Hello world</p>","lang":"typescript","description":"Shows basic webpack rule, template usage, and import of compiled template as a function."},"warnings":[{"fix":"Set _.templateSettings.imports before any require/import calls to the loader.","message":"When using lodash, template imports require setting _.templateSettings.imports before requiring the template.","severity":"gotcha","affected_versions":">=0.7.0"},{"fix":"Use `module.rules` instead of `module.loaders`. Example is for old syntax.","message":"Webpack 4 changed loader configuration from `loaders` (array of objects) to `rules` (array with `use` or `loader`).","severity":"breaking","affected_versions":"1.0"},{"fix":"Use `@include` or `@require` macros instead.","message":"The `include` tag is deprecated in favor of `@include` and `@require` macros.","severity":"deprecated","affected_versions":">=0.5.0"},{"fix":"Add appropriate loader rule for image file types.","message":"Images in templates require file-loader or url-loader to be installed and configured separately.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure you use underscore-template-loader 1.2.0 or later for Webpack 5 compatibility.","message":"Webpack 5 may require adjustments to loader query options; version 1.2 adds support.","severity":"breaking","affected_versions":"1.2"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install underscore-template-loader --save-dev` and ensure `loader: 'underscore-template-loader'` in webpack config.","cause":"Loader not installed or not listed in webpack config correctly.","error":"Module not found: Error: Can't resolve 'underscore-template-loader'"},{"fix":"Add `{ test: /\\.html$/, loader: 'underscore-template-loader' }` to webpack `module.rules`.","cause":"Webpack doesn't have rule for .html files to use underscore-template-loader.","error":"You may need an appropriate loader to handle this file type."},{"fix":"Install underscore: `npm install underscore` (or lodash if using lodash engine).","cause":"underscore package not installed, but required by compiled template at runtime.","error":"Cannot find module 'underscore'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}