{"id":20630,"library":"twig-loader","title":"twig-loader","description":"Webpack loader for pre-compiling Twig.js templates. Current stable version is 0.5.5. It compiles .twig files into JavaScript functions and automatically includes Twig.js runtime. Key differentiators: supports all Twig inheritance features (import, include, extends, embed) and resolves template dependencies statically. It is maintained by the community but has seen infrequent updates, with the last release in 2018. Requires webpack and the 'twig' package as peer dependency (~1.10.5).","status":"maintenance","version":"0.5.5","language":"javascript","source_language":"en","source_url":"https://github.com/zimmo-be/twig-loader","tags":["javascript"],"install":[{"cmd":"npm install twig-loader","lang":"bash","label":"npm"},{"cmd":"yarn add twig-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add twig-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - Twig.js is the runtime dependency for compiled templates","package":"twig","optional":false}],"imports":[{"note":"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.","wrong":"module.exports = { module: { loaders: [ { test: /\\.twig$/, loader: 'twig-loader' } ] } }","symbol":"twig-loader (default)","correct":"module.exports = { module: { rules: [ { test: /\\.twig$/, use: { loader: 'twig-loader' } } ] } }"},{"note":"The required module returns a function directly, not the rendered output. You must call it with context.","wrong":"var html = require('./dialog.html.twig')({title: 'dialog title'});","symbol":"template (compiled module)","correct":"var template = require('./dialog.html.twig');\nvar html = template({title: 'dialog title'});"},{"note":"When registering dynamic templates at runtime, use the exported 'tokens' property on the compiled template function, not the function itself.","wrong":"var twig = require('twig').twig;\ntwig({ id: 'my-template', data: template });","symbol":"twig function (runtime registration)","correct":"var twig = require('twig').twig;\ntwig({ id: 'my-template', data: template.tokens });"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.twig$/,\n        use: {\n          loader: 'twig-loader',\n          options: {\n            twigOptions: { autoescape: true }\n          }\n        }\n      }\n    ]\n  },\n  node: {\n    fs: 'empty'\n  }\n};\n\n// src/index.js\nvar template = require('./template.html.twig');\nvar html = template({ title: 'Hello' });\ndocument.body.innerHTML = html;\n\n// src/template.html.twig\n// <p>{{title}}</p>","lang":"javascript","description":"Shows Webpack configuration with twig-loader and usage in JavaScript: require a .twig file, call it with context to render HTML."},"warnings":[{"fix":"Install twig@~1.10.5 explicitly: npm install twig@~1.10.5","message":"Peer dependency 'twig' version ~1.10.5 may cause compatibility issues with newer Twig.js versions. Using a different version may break template compilation.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Use require.context to preload dynamic templates and register them via twig() with the tokens property.","message":"Dynamic template imports (e.g., include(variable)) are not resolved by webpack and require manual runtime registration.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Use resolve.fallback: { fs: false } in webpack config for Webpack 4+.","message":"In Webpack 4+, setting node: { fs: 'empty' } is deprecated. Use resolve.fallback instead.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Upgrade to 0.5.2 or later.","message":"Security fix in 0.5.2 addressed a vulnerability in mocha dev dependency. However, no CVEs were reported for the loader itself.","severity":"deprecated","affected_versions":"<0.5.2"},{"fix":"Use absolute paths or paths relative to the template file for include/extends/import.","message":"The loader uses webpack's 'require' to resolve template dependencies. Ensure relative paths in templates are correct relative to the template file.","severity":"gotcha","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install twig@~1.10.5","cause":"The peer dependency 'twig' is not installed.","error":"Module not found: Error: Can't resolve 'twig' in '/path/to/project'"},{"fix":"Ensure webpack rule matches .twig files and twig-loader is installed. Check that the loader is in the rules array.","cause":"Twig template is required but not compiled correctly, or the loader is not applied.","error":"TypeError: template is not a function"},{"fix":"Double-check path relative to the template file. Use absolute path with webpack's context or register template at runtime.","cause":"Relative path in include/extends cannot be resolved by webpack.","error":"Cannot find module './partial.twig' (while resolving 'template.twig')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}