Registry /
devops / webpack-mustache-loader
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default
✓ module.exports = require('./template.html')
✗ import template from './template.html'
Webpack loader returns a function or Hogan template; ESM import may not work unless configured as default.
loader
✓ loader: 'webpack-mustache-loader'
✗ loader: 'mustache'
Must use full package name. 'mustache' is ambiguous with other loaders.
options
✓ use: [ { loader: 'webpack-mustache-loader', options: { ... } } ]
✗ use: [ 'webpack-mustache-loader', options: { ... } ]
Options object must be nested under loader in webpack >=2.
Shows how to configure the loader and import a Mustache template as a function that produces HTML.
// webpack.config.js
module.exports = {
entry: './index.js',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'webpack-mustache-loader',
options: { tiny: true, render: { title: 'hello' } }
}
]
}
]
}
};
// index.js
import template from './template.html';
const html = template({ name: 'World' });
console.log(html); // "Hello, World!"
Debug
Known issues
breakingThe package name changed from 'mustache-loader' to 'webpack-mustache-loader' between major versions.fixInstall 'webpack-mustache-loader' instead of 'mustache-loader'.
affects: <1.0.0
gotchaPeer dependencies hogan.js and webpack must be installed separately.fixRun 'npm install hogan.js webpack --save-dev'.
affects: >=1.0.0
gotchaWhen webpack is configured to use ESM, the exported module may not be a function by default.fixUse CommonJS require or configure webpack to default export JSON.
affects: >=1.0.0
deprecatedOptions 'minify', 'clientSide', 'tiny' are ignored if another loader is chained after this one.fixEnsure this loader is the last in the chain for those options to take effect.
affects: >=1.0.0
gotchaUsing 'render' option with an object will pre-render the template, but subsequent updates may not reflect if using hot reload.fixPass a function as 'render' to enable dynamic data updates.
affects: >=1.0.0
gotchaThe 'noShortcut' option returns a Hogan template object instead of a rendered HTML string, which changes how the output is used.fixCall template.render() with data and partials when using 'noShortcut'.
affects: >=1.0.0
breakingWebpack 4 requires use of 'rules' instead of 'loaders' in module configuration.fixUse module.rules with loader option syntax.
affects: >=4.0.0 (webpack)
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'hogan.js'
Missing peer dependency hogan.js.
fixRun 'npm install hogan.js --save-dev'.
Invalid options object. Mustache Loader has been initialized using an options object that does not match the API schema.
Options passed incorrectly as string or wrong format.
fixUse options object form: `use: [ { loader: 'webpack-mustache-loader', options: { ... } } ]`. TypeError: template is not a function
Using webpack ESM import without correct configuration.
fixUse `const template = require('./template.html')` or configure webpack to use CommonJS output. The 'loader' property must be a string
Options object passed directly as loader string.
fixWrap in `use` array with `loader` and `options` keys.
Audit
Dependencies
hogan.jsoptionalRuntime peer dependency for template compilation
webpackoptionalPeer dependency for loader usage