Vite Plugin Twig Drupal

1.6.2 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: Cannot find module 'vite-plugin-twig-drupal' ↓

cause Package not installed or wrong import path

fix

Run 'npm install vite-plugin-twig-drupal --save-dev' and ensure import path is correct

error TypeError: twigDrupal is not a function ↓

cause Using named import { twigDrupal } instead of default import

fix

Use 'import twigDrupal from 'vite-plugin-twig-drupal''

error Error: Namespace '@components' not found ↓

cause Missing namespace configuration in plugin options

fix

Add 'namespaces: { components: 'path/to/components' }' in vite.config.js

Warnings

breaking Trying to use require() to import the plugin ↓

fix Use ES module import syntax with 'import'

gotcha Twig errors during build show unhelpful stack traces without template line numbers ↓

fix Enable source maps in Vite config: 'build.sourcemap: true'

gotcha Drupal specific filters/ functions (e.g., '|trans') not available by default ↓

fix Register custom filters via the 'drupalFilter' export or configure them in plugin options

deprecated The 'twig' option for custom Twig environment is deprecated in favor of 'twigOptions' ↓

fix Use 'twigOptions' instead of 'twig' in plugin config

Install

npm install vite-plugin-twig-drupal

yarn add vite-plugin-twig-drupal

pnpm add vite-plugin-twig-drupal

Imports

default

wrong

const twigDrupal = require('vite-plugin-twig-drupal')

correct

import twigDrupal from 'vite-plugin-twig-drupal'

ESM-only plugin, cannot use require()

drupalFilter

import { drupalFilter } from 'vite-plugin-twig-drupal'

Named export for custom filters

twig

wrong

import { twigDrupal } from 'vite-plugin-twig-drupal'

correct

import twigDrupal from 'vite-plugin-twig-drupal'; const plugins = [twigDrupal()]

Default export is function, not object

Quickstart

Configures Vite to compile Twig templates with Drupal namespaces, enabling use of @components/ and @layouts/ prefixes in templates.

// vite.config.js
import { defineConfig } from 'vite';
import twigDrupal from 'vite-plugin-twig-drupal';

export default defineConfig({
  plugins: [
    twigDrupal({
      namespaces: {
        components: 'path/to/components',
        layouts: 'path/to/layouts',
      },
    }),
  ],
});