{"id":20631,"library":"twigjs-loader","title":"twigjs-loader","description":"Webpack loader for compiling Twig.js templates. Current stable version is 1.0.3, released with support for Node.js >=8. It integrates Twig templates into webpack builds, allowing template imports in JavaScript and TypeScript. Key differentiators: provides an Express view engine helper, supports Hot Module Replacement, and offers a customizable renderTemplate option for advanced compilation control. Ships TypeScript type definitions. Peer dependency on twig 1.x.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/megahertz/twigjs-loader","tags":["javascript","twig","twig.js","template","webpack","loader","typescript"],"install":[{"cmd":"npm install twigjs-loader","lang":"bash","label":"npm"},{"cmd":"yarn add twigjs-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add twigjs-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for template rendering; must be installed separately (peer dependency).","package":"twig","optional":false}],"imports":[{"note":"ESM import works with webpack module rules; CommonJS require also works but not recommended for consistency.","wrong":"const indexView = require('./index.twig')","symbol":"twigjs-loader (default)","correct":"import indexView from './index.twig'"},{"note":"ESM named export; CommonJS require is also valid but less idiomatic.","wrong":"const ExpressView = require('twigjs-loader').ExpressView","symbol":"ExpressView","correct":"import { ExpressView } from 'twigjs-loader'"},{"note":"Both arrow and regular functions work; ensure the function returns a string of JavaScript code.","wrong":"use: { loader: 'twigjs-loader', options: { renderTemplate: (twigData, dependencies, isHot) => { ... } } }","symbol":"renderTemplate option","correct":"use: { loader: 'twigjs-loader', options: { renderTemplate(twigData, dependencies, isHot) { ... } } }"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.twig$/,\n        use: {\n          loader: 'twigjs-loader',\n          options: {\n            renderTemplate(twigData, dependencies, isHot) {\n              return `\n                ${dependencies}\n                var twig = require(\"twig\").twig;\n                var tpl = twig(${JSON.stringify(twigData)});\n                module.exports = function(context) { return tpl.render(context); };\n              `;\n            },\n          },\n        },\n      },\n    ],\n  },\n};\n\n// index.js\nimport indexView from './index.twig';\ndocument.body.innerHTML = indexView({ name: 'World' });\n\n// index.twig\n<h1>Hello {{ name }}!</h1>","lang":"javascript","description":"Basic setup: webpack config with twigjs-loader, importing a Twig template in ESM, and rendering it with data."},"warnings":[{"fix":"Run 'npm install twig@1' alongside twigjs-loader.","message":"Requires peer dependency 'twig' version 1.x - must be installed separately.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Configure webpack resolve.alias or resolve.modules for custom template directories.","message":"Template path resolution is delegated to webpack; custom namespaces require additional webpack resolve configuration.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Import { ExpressView } from 'twigjs-loader' and set app.set('view', ExpressView).","message":"ExpressView helper requires twigjs-loader to be in the same project; not a separate export.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install twig@1","cause":"Missing peer dependency 'twig'.","error":"Module not found: Error: Can't resolve 'twig' in '...'"},{"fix":"Use absolute paths or configure webpack resolve.modules/resolve.alias.","cause":"Webpack cannot resolve the template path relative to the importing file.","error":"Error: Template not found: ... .twig"},{"fix":"Ensure 'require(\"twig\").twig' returns a function and that twigData is valid.","cause":"The twig object is not initialized correctly in custom renderTemplate.","error":"TypeError: Cannot read property 'render' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}