Registry / web-framework / vite-check-multiple-dom

vite-check-multiple-dom

library0.2.2jsnpmunverified

A Vite plugin that captures Vue <Transition> runtime warnings about multiple root nodes and displays actionable fix suggestions via Vite's error overlay during development. Current version 0.2.2, updated occasionally. Key differentiators: focuses exclusively on the common Vue Transition multi-root pitfall, provides localized (zh/en) messages, integrates with Vite's HMR WebSocket for seamless overlay display, and supports both plugin (vite.config) and client (main.ts) setup. Requires Vue >=3.0.0 and Vite >=4.0.0.

web-framework devops

npm install vite-check-multiple-dom

package ↗

INSTALL

IMPORT

SIG · VITE-CHECK-MULTIPL

vite-check-multiple-dom

web-frameworkjavascriptv0.2.2

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.

default (plugin)

✓ import vueRootValidator from 'vite-check-multiple-dom'

✗ import { vueRootValidator } from 'vite-check-multiple-dom'

Default export is the Vite plugin function.

setupVueRootValidator

✓ import { setupVueRootValidator } from 'vite-check-multiple-dom/client'

✗ import { setupVueRootValidator } from 'vite-check-multiple-dom'

The client setup must be imported from 'vite-check-multiple-dom/client' subpath.

type imports (TypeScript)

✓ import type { SetupOptions } from 'vite-check-multiple-dom/client'

Types are exported from the client subpath; no explicit type exports from the main plugin.

Demonstrates plugin registration in vite.config.ts and client-side setup in main.ts.

// vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueRootValidator from 'vite-check-multiple-dom'; export default defineConfig({ plugins: [vue(), vueRootValidator()] }); // main.ts (or main.js) import { createApp } from 'vue'; import App from './App.vue'; import { setupVueRootValidator } from 'vite-check-multiple-dom/client'; const app = createApp(App); setupVueRootValidator(app, { lang: 'zh' }); app.mount('#app');

Debug

Known issues

gotchaThe plugin only works in Vite dev server, not in production builds.

fix

Use only during development; ensure the plugin is not included in production build config.

affects: >=0.0.0

gotchasetupVueRootValidator must be called before app.mount().

fix

Place setupVueRootValidator call after all other plugin setups but before mount.

affects: >=0.0.0

gotchaLanguage configuration in vite.config.ts is not supported; lang only works in client setup.

fix

Pass the lang option only to setupVueRootValidator in main.ts.

affects: >=0.0.0

deprecatedUsing CommonJS require() may cause issues; package is ESM-only.

fix

Use ES module imports. For vite.config.ts, ensure it is an ES module.

affects: >=0.2.0

gotchaThe plugin intercepts all Vue warnings via warnHandler; may conflict with other custom warnHandler setups.

fix

If you have your own warnHandler, you may need to combine them manually.

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module 'vite-check-multiple-dom/client' or its corresponding type declarations.

Missing subpath export in package.json or TypeScript not configured for subpath imports.

fix

Ensure your TypeScript version supports subpath exports (>=4.7) and that your tsconfig.json includes 'moduleResolution': 'node16' or 'bundler'.

TypeError: vueRootValidator is not a function

Importing the plugin incorrectly (named import instead of default).

fix

Use default import: import vueRootValidator from 'vite-check-multiple-dom'

Vite Error Overlay not showing for Transition warnings

Possible missing WebSocket connection or warnHandler not triggered (e.g., production mode).

fix

Run Vite dev server (not production build). Check browser console for Vue warnings; if they appear, ensure the plugin is correctly set up in both vite.config.ts and main.ts.

Upgrade

Version history

0.2.2latest on npm

Audit

Dependencies

viterequiredPeer dependency – plugin hooks into Vite's dev server and HMR

vuerequiredPeer dependency – intercepts Vue's warnHandler for Transition warnings

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/vite-check-multiple-dom ↗