{"id":22842,"library":"vite-plugin-source-identifier","title":"Vite Plugin Source Identifier","description":"A Vite plugin that injects source location and component metadata (file path, line, column, props) into DOM elements during development for easier debugging. Version 1.1.2 stable, with frequent releases. Supports React (JSX/TSX) and Vue. Differentiators: zero config, optional prop serialization, custom attribute prefix, and TypeScript types. Only runs in dev mode with no production overhead.","status":"active","version":"1.1.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","plugin","react","vue","development","debugging","source-map","typescript"],"install":[{"cmd":"npm install vite-plugin-source-identifier","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-source-identifier","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-source-identifier","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: plugin requires Vite >=5.0.0","package":"vite","optional":false}],"imports":[{"note":"This is a named export, not default. Common mistake to use default import.","wrong":"import sourceIdentifierPlugin from 'vite-plugin-source-identifier'","symbol":"sourceIdentifierPlugin","correct":"import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier'"},{"note":"TypeScript type-only import to avoid emitting runtime code.","wrong":"import { SourceIdentifierOptions } from 'vite-plugin-source-identifier'","symbol":"SourceIdentifierOptions","correct":"import type { SourceIdentifierOptions } from 'vite-plugin-source-identifier'"},{"note":"As above, named export must be used. Also do not forget to call the function.","wrong":"import sourceIdentifierPlugin from 'vite-plugin-source-identifier';\nexport default defineConfig({ plugins: [sourceIdentifierPlugin()] })","symbol":"Plugin usage in vite.config.ts","correct":"import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier';\nexport default defineConfig({ plugins: [sourceIdentifierPlugin()] })"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { sourceIdentifierPlugin } from 'vite-plugin-source-identifier'\n\nexport default defineConfig({\n  plugins: [\n    sourceIdentifierPlugin(),\n    react(),\n  ],\n})\n\n// Then in any React component:\nfunction Button({ text }: { text: string }) {\n  return <button>{text}</button>\n}\n// After dev, DOM will have:\n// <button data-lov-id=\"src/Button.tsx:3:10\" data-lov-name=\"button\" ...>Hello</button>","lang":"typescript","description":"Basic setup with React. Add the plugin before or after framework plugin, then inspect DOM elements in dev tools."},"warnings":[{"fix":"Set `enabled: true` in options if you need it in production preview (not recommended).","message":"Plugin only works in development mode. Ensure Vite's NODE_ENV is 'development' or set `enabled: true` explicitly.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Override `include` with the exact extensions you need.","message":"The `include` option defaults to ['.jsx', '.tsx', '.vue']. If your files use .jsx or .tsx but not .vue, you still need to include .vue if you use Vue.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Set `includeProps: false` or filter sensitive props yourself.","message":"Property serialization can expose sensitive props (e.g., tokens) in DOM attributes. Use `includeProps: false` or avoid passing secrets.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Update import to `import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier'` and remove old usage.","message":"Version 1.0.0 changed the plugin export name from `sourceIdentifier` to `sourceIdentifierPlugin`. Old code will break.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"If issues arise, try placing `sourceIdentifierPlugin()` after the framework plugin.","message":"Plugins are order-sensitive for some Vite transforms. The documentation says it works before or after framework plugins, but if used with other Vite plugins that modify JSX, order may matter.","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":"Add '.js' to the `include` option: `include: ['.jsx', '.tsx', '.vue', '.js']`","cause":"Plugin does not process .js files by default (only .jsx, .tsx, .vue).","error":"Error: \"Unsupported file extension: .js\""},{"fix":"Use `import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier';` then call `sourceIdentifierPlugin()`.","cause":"Default import used instead of named import.","error":"TypeError: sourceIdentifierPlugin is not a function"},{"fix":"Add `sourceIdentifierPlugin()` to plugins array and ensure development mode.","cause":"Plugin not added to Vite config, or Vite is running in production mode.","error":"Attribute \"data-lov-id\" not appearing on elements"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}