{"id":22543,"library":"vite-check-multiple-dom","title":"Vite Check Multiple DOM","description":"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.","status":"active","version":"0.2.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","azir","vite","vue","vue-router","router","transition","root","validator","typescript"],"install":[{"cmd":"npm install vite-check-multiple-dom","lang":"bash","label":"npm"},{"cmd":"yarn add vite-check-multiple-dom","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-check-multiple-dom","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency – plugin hooks into Vite's dev server and HMR","package":"vite","optional":false},{"reason":"Peer dependency – intercepts Vue's warnHandler for Transition warnings","package":"vue","optional":false}],"imports":[{"note":"Default export is the Vite plugin function.","wrong":"import { vueRootValidator } from 'vite-check-multiple-dom'","symbol":"default (plugin)","correct":"import vueRootValidator from 'vite-check-multiple-dom'"},{"note":"The client setup must be imported from 'vite-check-multiple-dom/client' subpath.","wrong":"import { setupVueRootValidator } from 'vite-check-multiple-dom'","symbol":"setupVueRootValidator","correct":"import { setupVueRootValidator } from 'vite-check-multiple-dom/client'"},{"note":"Types are exported from the client subpath; no explicit type exports from the main plugin.","wrong":null,"symbol":"type imports (TypeScript)","correct":"import type { SetupOptions } from 'vite-check-multiple-dom/client'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vueRootValidator from 'vite-check-multiple-dom';\n\nexport default defineConfig({\n  plugins: [vue(), vueRootValidator()]\n});\n\n// main.ts (or main.js)\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { setupVueRootValidator } from 'vite-check-multiple-dom/client';\n\nconst app = createApp(App);\nsetupVueRootValidator(app, { lang: 'zh' });\napp.mount('#app');","lang":"typescript","description":"Demonstrates plugin registration in vite.config.ts and client-side setup in main.ts."},"warnings":[{"fix":"Use only during development; ensure the plugin is not included in production build config.","message":"The plugin only works in Vite dev server, not in production builds.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Place setupVueRootValidator call after all other plugin setups but before mount.","message":"setupVueRootValidator must be called before app.mount().","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Pass the lang option only to setupVueRootValidator in main.ts.","message":"Language configuration in vite.config.ts is not supported; lang only works in client setup.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use ES module imports. For vite.config.ts, ensure it is an ES module.","message":"Using CommonJS require() may cause issues; package is ESM-only.","severity":"deprecated","affected_versions":">=0.2.0"},{"fix":"If you have your own warnHandler, you may need to combine them manually.","message":"The plugin intercepts all Vue warnings via warnHandler; may conflict with other custom warnHandler setups.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure your TypeScript version supports subpath exports (>=4.7) and that your tsconfig.json includes 'moduleResolution': 'node16' or 'bundler'.","cause":"Missing subpath export in package.json or TypeScript not configured for subpath imports.","error":"Cannot find module 'vite-check-multiple-dom/client' or its corresponding type declarations."},{"fix":"Use default import: import vueRootValidator from 'vite-check-multiple-dom'","cause":"Importing the plugin incorrectly (named import instead of default).","error":"TypeError: vueRootValidator is not a function"},{"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.","cause":"Possible missing WebSocket connection or warnHandler not triggered (e.g., production mode).","error":"Vite Error Overlay not showing for Transition warnings"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}