{"id":20629,"library":"twig-html-loader","title":"twig-html-loader","description":"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).","status":"maintenance","version":"0.1.9","language":"javascript","source_language":"en","source_url":"https://github.com/radiocity/twig-html-loader","tags":["javascript","html","twig","loader","webpack","compile","plain"],"install":[{"cmd":"npm install twig-html-loader","lang":"bash","label":"npm"},{"cmd":"yarn add twig-html-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add twig-html-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Must be chained before twig-html-loader to pass raw Twig content","package":"raw-loader","optional":false}],"imports":[{"note":"Must be used with raw-loader chained before it. Webpack config object, not a JS import.","wrong":"{ test: /\\.twig$/, use: 'twig-html-loader' }","symbol":"twig-html-loader","correct":"{ test: /\\.twig$/, use: ['raw-loader', 'twig-html-loader'] }"},{"note":"CommonJS is typical in webpack.config.js. ESM may work with webpack 5 but is less common.","wrong":"import HtmlWebpackPlugin from 'html-webpack-plugin';","symbol":"HtmlWebpackPlugin","correct":"const HtmlWebpackPlugin = require('html-webpack-plugin');"},{"note":"Using require() caches the file and breaks webpack watch. Use context.addDependency() for watching.","wrong":"data: () => { return require('./data.json'); }","symbol":"data option as function","correct":"data: (context) => { context.addDependency('./data.json'); return { /* ... */ }; }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.twig$/,\n        use: ['raw-loader', 'twig-html-loader']\n      }\n    ]\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/index.twig'\n    })\n  ]\n};","lang":"javascript","description":"webpack config to compile Twig templates to HTML strings using raw-loader and twig-html-loader."},"warnings":[{"fix":"Add 'raw-loader' before 'twig-html-loader' in the use array.","message":"Requires raw-loader to be chained before twig-html-loader. Without it, the loader receives a module object instead of raw Twig content.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Use context.addDependency() as shown in the README watch-data example.","message":"Data option function must call context.addDependency() to enable webpack watch; using require() caches the file and breaks HMR.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always include raw-loader before twig-html-loader.","message":"When 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add 'raw-loader' to the use array before 'twig-html-loader'.","cause":"Missing raw-loader before twig-html-loader.","error":"Module build failed: Error: You may need an additional loader to handle the result of these loaders."},{"fix":"Install twig as a dependency: npm install twig --save-dev","cause":"twig-html-loader depends on twig (Twig.js) but it may not be installed.","error":"Cannot find module 'twig'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}