Registry / devops / twig-html-loader

twig-html-loader

library0.1.9jsnpmunverified

Webpack loader that compiles Twig templates into an HTML string using Twig.js. Version 0.1.9 is the latest stable release (last updated 2019). It integrates with webpack to process .twig files, supports data injection, caching, namespaces, and custom Twig extensions (functions, filters, tests, tags). Compared to alternatives like twig-loader, it returns raw HTML string rather than a compiled template function, which simplifies usage with html-webpack-plugin. Requires raw-loader as a peer dependency. Low maintenance cadence (no updates since 2019).

devops

npm install twig-html-loader

github ↗package ↗

INSTALL

IMPORT

SIG · TWIG-HTML-LOADER

twig-html-loader

devopsjavascriptv0.1.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

twig-html-loader

✓ { test: /\.twig$/, use: ['raw-loader', 'twig-html-loader'] }

✗ { test: /\.twig$/, use: 'twig-html-loader' }

Must be used with raw-loader chained before it. Webpack config object, not a JS import.

HtmlWebpackPlugin

✓ const HtmlWebpackPlugin = require('html-webpack-plugin');

✗ import HtmlWebpackPlugin from 'html-webpack-plugin';

CommonJS is typical in webpack.config.js. ESM may work with webpack 5 but is less common.

data option as function

✓ data: (context) => { context.addDependency('./data.json'); return { /* ... */ }; }

✗ data: () => { return require('./data.json'); }

Using require() caches the file and breaks webpack watch. Use context.addDependency() for watching.

webpack config to compile Twig templates to HTML strings using raw-loader and twig-html-loader.

// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.twig$/, use: ['raw-loader', 'twig-html-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.twig' }) ] };

Debug

Known issues

breakingRequires raw-loader to be chained before twig-html-loader. Without it, the loader receives a module object instead of raw Twig content.

fix

Add 'raw-loader' before 'twig-html-loader' in the use array.

affects: >=0.1.0

gotchaData option function must call context.addDependency() to enable webpack watch; using require() caches the file and breaks HMR.

fix

Use context.addDependency() as shown in the README watch-data example.

affects: >=0.1.0

gotchaWhen using with html-webpack-plugin, both entries in use array (raw-loader and twig-html-loader) must be provided; omitting raw-loader causes a compilation error.

fix

Always include raw-loader before twig-html-loader.

affects: >=0.1.0

Errors

Common errors & fixes

Module build failed: Error: You may need an additional loader to handle the result of these loaders.

Missing raw-loader before twig-html-loader.

fix

Add 'raw-loader' to the use array before 'twig-html-loader'.

Cannot find module 'twig'

twig-html-loader depends on twig (Twig.js) but it may not be installed.

fix

Install twig as a dependency: npm install twig --save-dev

Upgrade

Version history

0.1.9latest on npm

Audit

Dependencies

raw-loaderrequiredMust be chained before twig-html-loader to pass raw Twig content

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/radiocity/twig-html-loader ↗

packagehttps://www.npmjs.com/package/twig-html-loader ↗