{"id":22926,"library":"vite-plugin-web-components-hmr","title":"Vite Plugin Web Components HMR","description":"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+.","status":"active","version":"0.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/fi3ework/vite-plugin-web-components-hmr","tags":["javascript","web","dev server","hmr","hot","module","replacement","reload","typescript"],"install":[{"cmd":"npm install vite-plugin-web-components-hmr","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-web-components-hmr","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-web-components-hmr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, requires Vite >=2.","package":"vite","optional":true}],"imports":[{"note":"ESM-only package, cannot use CommonJS require().","wrong":"const hmrPlugin = require('vite-plugin-web-components-hmr')","symbol":"hmrPlugin","correct":"import { hmrPlugin } from 'vite-plugin-web-components-hmr'"},{"note":"presets is a named export from the main entry, not a subpath.","wrong":"import { presets } from 'vite-plugin-web-components-hmr/presets'","symbol":"presets","correct":"import { presets } from 'vite-plugin-web-components-hmr'"},{"note":"Package has no default export; use named imports { hmrPlugin }.","wrong":"No common wrong pattern, but default export is not documented; use named imports.","symbol":"default import","correct":"import vitePluginWcHmr from 'vite-plugin-web-components-hmr'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { hmrPlugin, presets } from 'vite-plugin-web-components-hmr';\n\nexport default defineConfig({\n  plugins: [\n    hmrPlugin({\n      include: ['./src/**/*.ts'],\n      presets: [presets.lit],\n    }),\n  ],\n});","lang":"typescript","description":"Basic setup with Lit preset. Add plugin to Vite config to enable HMR for components matching the include pattern."},"warnings":[{"fix":"Upgrade Vite to version 2 or higher.","message":"Requires Vite >=2. Will fail to resolve plugin if Vite version is older.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Use import syntax in an ES module context.","message":"Plugin is ESM-only. Cannot be used with CommonJS require().","severity":"gotcha","affected_versions":"all"},{"fix":"Refer to @open-wc/dev-server-hmr documentation for available options.","message":"Options are directly from @open-wc/dev-server-hmr, which may deprecate or change. Check compatibility.","severity":"deprecated","affected_versions":"all"},{"fix":"Ensure include globs cover all component files, e.g., 'src/components/**/*.ts'.","message":"include patterns must match file paths relative to project root. Wrong glob can cause no HMR.","severity":"gotcha","affected_versions":"all"},{"fix":"Check preset definitions; can create custom presets using the same format.","message":"Presets may not cover all web component libraries; custom presets may be needed.","severity":"deprecated","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install -D vite-plugin-web-components-hmr` or equivalent.","cause":"Package not installed or not in node_modules.","error":"Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'vite-plugin-web-components-hmr'"},{"fix":"Use `import { hmrPlugin } from 'vite-plugin-web-components-hmr'`.","cause":"Using default import instead of named import.","error":"TypeError: hmrPlugin is not a function"},{"fix":"Ensure the package is installed. Add to `optimizeDeps.include` if necessary.","cause":"Plugin not included in Vite's optimizeDeps or not installed.","error":"ViteError: Cannot find module 'vite-plugin-web-components-hmr' ... Did you mean to import 'vite-plugin-web-components-hmr'?"},{"fix":"Wrap presets in an array: `presets: [presets.lit]`.","cause":"Passing a single preset object without array brackets.","error":"Invalid presets argument: Expected an array."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}