Registry / web-framework / vite-plugin-web-components-hmr

vite-plugin-web-components-hmr

library0.1.3jsnpmunverified

A Vite plugin enabling hot module replacement (HMR) for web components, primarily designed for LitElement and similar libraries. Current stable version is 0.1.3, with low release cadence. It is a fork of @open-wc/dev-server-hmr adapted for Vite's plugin system. Key differentiator: seamless HMR for custom elements in Vite projects without additional configuration. Supports TypeScript, configurable inclusion patterns, and presets for popular libraries (Lit, FAST, etc.). Primarily used with Vite 2+.

web-framework

npm install vite-plugin-web-components-hmr

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-WEB-CO

vite-plugin-web-components-hmr

web-frameworkjavascriptv0.1.3

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.

hmrPlugin

✓ import { hmrPlugin } from 'vite-plugin-web-components-hmr'

✗ const hmrPlugin = require('vite-plugin-web-components-hmr')

ESM-only package, cannot use CommonJS require().

presets

✓ import { presets } from 'vite-plugin-web-components-hmr'

✗ import { presets } from 'vite-plugin-web-components-hmr/presets'

presets is a named export from the main entry, not a subpath.

default import

✓ import vitePluginWcHmr from 'vite-plugin-web-components-hmr'

✗ No common wrong pattern, but default export is not documented; use named imports.

Package has no default export; use named imports { hmrPlugin }.

Basic setup with Lit preset. Add plugin to Vite config to enable HMR for components matching the include pattern.

// vite.config.ts import { defineConfig } from 'vite'; import { hmrPlugin, presets } from 'vite-plugin-web-components-hmr'; export default defineConfig({ plugins: [ hmrPlugin({ include: ['./src/**/*.ts'], presets: [presets.lit], }), ], });

Debug

Known issues

breakingRequires Vite >=2. Will fail to resolve plugin if Vite version is older.

fix

Upgrade Vite to version 2 or higher.

affects: <2.0.0

gotchaPlugin is ESM-only. Cannot be used with CommonJS require().

fix

Use import syntax in an ES module context.

affects: all

deprecatedOptions are directly from @open-wc/dev-server-hmr, which may deprecate or change. Check compatibility.

fix

Refer to @open-wc/dev-server-hmr documentation for available options.

affects: all

gotchainclude patterns must match file paths relative to project root. Wrong glob can cause no HMR.

fix

Ensure include globs cover all component files, e.g., 'src/components/**/*.ts'.

affects: all

deprecatedPresets may not cover all web component libraries; custom presets may be needed.

fix

Check preset definitions; can create custom presets using the same format.

affects: all

Errors

Common errors & fixes

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'vite-plugin-web-components-hmr'

Package not installed or not in node_modules.

fix

Run `npm install -D vite-plugin-web-components-hmr` or equivalent.

TypeError: hmrPlugin is not a function

Using default import instead of named import.

fix

Use `import { hmrPlugin } from 'vite-plugin-web-components-hmr'`.

ViteError: Cannot find module 'vite-plugin-web-components-hmr' ... Did you mean to import 'vite-plugin-web-components-hmr'?

Plugin not included in Vite's optimizeDeps or not installed.

fix

Ensure the package is installed. Add to `optimizeDeps.include` if necessary.

Invalid presets argument: Expected an array.

Passing a single preset object without array brackets.

fix

Wrap presets in an array: `presets: [presets.lit]`.

Upgrade

Version history

0.1.3latest on npm

Audit

Dependencies

viteoptionalPeer dependency, requires Vite >=2.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/fi3ework/vite-plugin-web-components-hmr ↗

packagehttps://www.npmjs.com/package/vite-plugin-web-components-hmr ↗