{"id":22898,"library":"vite-plugin-twig-drupal","title":"Vite Plugin Twig Drupal","description":"A Vite plugin that compiles Twig templates to HTML with Drupal-specific features including Twig namespaces, includes, extends, and Drupal filter/function support. Current stable version 1.6.2, actively maintained, with monthly releases. Integrates with Storybook for component development. Supports Vite 4–7. Key differentiator: Drupal-aware Twig rendering without a Drupal backend, enabling frontend prototyping.","status":"active","version":"1.6.2","language":"javascript","source_language":"en","source_url":"https://github.com/larowlan/vite-plugin-twig-drupal","tags":["javascript","Vite","Vite plugin","Twig","Storybook","Drupal"],"install":[{"cmd":"npm install vite-plugin-twig-drupal","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-twig-drupal","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-twig-drupal","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only plugin, cannot use require()","wrong":"const twigDrupal = require('vite-plugin-twig-drupal')","symbol":"default","correct":"import twigDrupal from 'vite-plugin-twig-drupal'"},{"note":"Named export for custom filters","wrong":null,"symbol":"drupalFilter","correct":"import { drupalFilter } from 'vite-plugin-twig-drupal'"},{"note":"Default export is function, not object","wrong":"import { twigDrupal } from 'vite-plugin-twig-drupal'","symbol":"twig","correct":"import twigDrupal from 'vite-plugin-twig-drupal'; const plugins = [twigDrupal()]"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport twigDrupal from 'vite-plugin-twig-drupal';\n\nexport default defineConfig({\n  plugins: [\n    twigDrupal({\n      namespaces: {\n        components: 'path/to/components',\n        layouts: 'path/to/layouts',\n      },\n    }),\n  ],\n});","lang":"javascript","description":"Configures Vite to compile Twig templates with Drupal namespaces, enabling use of @components/ and @layouts/ prefixes in templates."},"warnings":[{"fix":"Use ES module import syntax with 'import'","message":"Trying to use require() to import the plugin","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Enable source maps in Vite config: 'build.sourcemap: true'","message":"Twig errors during build show unhelpful stack traces without template line numbers","severity":"gotcha","affected_versions":"<=1.6.2"},{"fix":"Register custom filters via the 'drupalFilter' export or configure them in plugin options","message":"Drupal specific filters/ functions (e.g., '|trans') not available by default","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use 'twigOptions' instead of 'twig' in plugin config","message":"The 'twig' option for custom Twig environment is deprecated in favor of 'twigOptions'","severity":"deprecated","affected_versions":">=1.5.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install vite-plugin-twig-drupal --save-dev' and ensure import path is correct","cause":"Package not installed or wrong import path","error":"Error: Cannot find module 'vite-plugin-twig-drupal'"},{"fix":"Use 'import twigDrupal from 'vite-plugin-twig-drupal''","cause":"Using named import { twigDrupal } instead of default import","error":"TypeError: twigDrupal is not a function"},{"fix":"Add 'namespaces: { components: 'path/to/components' }' in vite.config.js","cause":"Missing namespace configuration in plugin options","error":"Error: Namespace '@components' not found"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}