Registry / web-framework / vite-plugin-drupal-twig-hmr

vite-plugin-drupal-twig-hmr

library1.0.1jsnpmunverified

A Vite plugin that enables Hot Module Replacement (HMR) for Drupal Twig templates and Single-Directory Components. Current stable version is 1.0.1, released on a low cadence. It uses Vite's HMR API and Drupal's Twig debug mode to fetch updated HTML and perform DOM replacements when a .twig file changes. Limited to theme suggestions and does not support TypeScript or automated testing. Differentiates from other Drupal build tools by providing instant template reloads without full page refresh, but requires a compatible Vite-Drupal setup (e.g., via the Vite module) and a virtual module script injected into the backend.

web-framework devops

npm install vite-plugin-drupal-twig-hmr

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-DRUPAL

vite-plugin-drupal-twig-hmr

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

viteDrupalTwigHMR (default export)

✓ import viteDrupalTwigHMR from 'vite-plugin-drupal-twig-hmr'

✗ const viteDrupalTwigHMR = require('vite-plugin-drupal-twig-hmr')

ESM-only; CommonJS require is not supported.

PluginOptions (type)

✓ import type { PluginOptions } from 'vite-plugin-drupal-twig-hmr'

✗ import { PluginOptions } from 'vite-plugin-drupal-twig-hmr'

Type import only; PluginOptions is a TypeScript type, not a runtime value.

Virtual module URL

✓ // In your Drupal template: <script src="localhost:5173/@vite-plugin-drupal-template-hmr" type="module"></script>

✗ import something from '/@vite-plugin-drupal-template-hmr'

The virtual module is requested via a script tag in the backend, not imported in frontend code.

Basic setup of the plugin in a Vite config file, showing import, server port, and plugin usage with optional templateBase option.

// vite.config.ts import { defineConfig } from 'vite'; import viteDrupalTwigHMR from 'vite-plugin-drupal-twig-hmr'; export default defineConfig({ server: { port: 5173, // must match Drupal script src }, plugins: [ viteDrupalTwigHMR({ // templateBase: '/path/to/drupal/root' // optional }), ], });

Debug

Known issues

gotchaPlugin only active during Vite dev server; production builds will not include any HMR functionality.

fix

No action needed; this is by design. Ensure you only rely on the plugin in development.

affects: >=1.0.0

gotchaTwig HMR only works for templates that are directly referenced as a theme suggestion; templates included via include/embed may not update correctly.

fix

Restructure templates to be theme suggestions where possible. For included templates, a full page reload may be needed.

affects: >=1.0.0

gotchaRequires Drupal Twig debug mode enabled (twig.config: debug: true) to insert HTML comments used for DOM replacement.

fix

Enable debug mode in Drupal's services.yml or settings.local.php.

affects: >=1.0.0

gotchaThe virtual module must be manually added as a script tag in your Drupal template; it is not automatically injected.

fix

Add <script src='http://localhost:5173/@vite-plugin-drupal-template-hmr' type='module'></script> to your HTML or page template.

affects: >=1.0.0

Errors

Common errors & fixes

Error: [vite] Internal server error: Cannot find module 'vite-plugin-drupal-twig-hmr'

Package not installed or node_modules missing.

fix

Run `npm install vite-plugin-drupal-twig-hmr --save-dev`

TypeError: viteDrupalTwigHMR is not a function

Using CommonJS require() on an ESM-only package.

fix

Use `import viteDrupalTwigHMR from 'vite-plugin-drupal-twig-hmr'` in an ESM context (type: module in package.json or .mjs extension).

Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:5173/@vite-plugin-drupal-template-hmr

Vite dev server not running or port mismatch, or script src points to wrong URL.

fix

Ensure Vite dev server is running on the expected port (e.g., 5173) and the script src matches (e.g., http://localhost:5173/@vite-plugin-drupal-template-hmr).

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/yannickoo/vite-plugin-drupal-twig-hmr ↗

packagehttps://www.npmjs.com/package/vite-plugin-drupal-twig-hmr ↗