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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
twig-loader (default)
✓ module.exports = { module: { rules: [ { test: /\.twig$/, use: { loader: 'twig-loader' } } ] } }
✗ module.exports = { module: { loaders: [ { test: /\.twig$/, loader: 'twig-loader' } ] } }
Webpack 1 uses 'loaders' array and 'loader' string property; Webpack 2+ uses 'rules' array and 'use' object. For old Webpack 1 config, use the wrong pattern.
template (compiled module)
✓ var template = require('./dialog.html.twig');
var html = template({title: 'dialog title'});
✗ var html = require('./dialog.html.twig')({title: 'dialog title'});
The required module returns a function directly, not the rendered output. You must call it with context.
twig function (runtime registration)
✓ var twig = require('twig').twig;
twig({ id: 'my-template', data: template.tokens });
✗ var twig = require('twig').twig;
twig({ id: 'my-template', data: template });
When registering dynamic templates at runtime, use the exported 'tokens' property on the compiled template function, not the function itself.
Shows Webpack configuration with twig-loader and usage in JavaScript: require a .twig file, call it with context to render HTML.
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.twig$/,
use: {
loader: 'twig-loader',
options: {
twigOptions: { autoescape: true }
}
}
}
]
},
node: {
fs: 'empty'
}
};
// src/index.js
var template = require('./template.html.twig');
var html = template({ title: 'Hello' });
document.body.innerHTML = html;
// src/template.html.twig
// <p>{{title}}</p>
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'twig' in '/path/to/project'
The peer dependency 'twig' is not installed.
fixRun: npm install twig@~1.10.5
TypeError: template is not a function
Twig template is required but not compiled correctly, or the loader is not applied.
fixEnsure webpack rule matches .twig files and twig-loader is installed. Check that the loader is in the rules array.
Cannot find module './partial.twig' (while resolving 'template.twig')
Relative path in include/extends cannot be resolved by webpack.
fixDouble-check path relative to the template file. Use absolute path with webpack's context or register template at runtime.
Audit
Dependencies
twigrequiredpeer dependency - Twig.js is the runtime dependency for compiled templates