Vite Plugin Source Identifier

1.1.2 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: "Unsupported file extension: .js" ↓

cause Plugin does not process .js files by default (only .jsx, .tsx, .vue).

fix

Add '.js' to the include option: include: ['.jsx', '.tsx', '.vue', '.js']

error TypeError: sourceIdentifierPlugin is not a function ↓

cause Default import used instead of named import.

fix

Use import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier'; then call sourceIdentifierPlugin().

error Attribute "data-lov-id" not appearing on elements ↓

cause Plugin not added to Vite config, or Vite is running in production mode.

fix

Add sourceIdentifierPlugin() to plugins array and ensure development mode.

Warnings

gotcha Plugin only works in development mode. Ensure Vite's NODE_ENV is 'development' or set `enabled: true` explicitly. ↓

fix Set `enabled: true` in options if you need it in production preview (not recommended).

gotcha 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. ↓

fix Override `include` with the exact extensions you need.

gotcha Property serialization can expose sensitive props (e.g., tokens) in DOM attributes. Use `includeProps: false` or avoid passing secrets. ↓

fix Set `includeProps: false` or filter sensitive props yourself.

breaking Version 1.0.0 changed the plugin export name from `sourceIdentifier` to `sourceIdentifierPlugin`. Old code will break. ↓

fix Update import to `import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier'` and remove old usage.

gotcha 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. ↓

fix If issues arise, try placing `sourceIdentifierPlugin()` after the framework plugin.

Install

npm install vite-plugin-source-identifier

yarn add vite-plugin-source-identifier

pnpm add vite-plugin-source-identifier

Imports

sourceIdentifierPlugin

wrong

import sourceIdentifierPlugin from 'vite-plugin-source-identifier'

correct

import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier'

This is a named export, not default. Common mistake to use default import.

SourceIdentifierOptions

wrong

import { SourceIdentifierOptions } from 'vite-plugin-source-identifier'

correct

import type { SourceIdentifierOptions } from 'vite-plugin-source-identifier'

TypeScript type-only import to avoid emitting runtime code.

Plugin usage in vite.config.ts

wrong

import sourceIdentifierPlugin from 'vite-plugin-source-identifier';
export default defineConfig({ plugins: [sourceIdentifierPlugin()] })

correct

import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier';
export default defineConfig({ plugins: [sourceIdentifierPlugin()] })

As above, named export must be used. Also do not forget to call the function.

Quickstart

Basic setup with React. Add the plugin before or after framework plugin, then inspect DOM elements in dev tools.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { sourceIdentifierPlugin } from 'vite-plugin-source-identifier'

export default defineConfig({
  plugins: [
    sourceIdentifierPlugin(),
    react(),
  ],
})

// Then in any React component:
function Button({ text }: { text: string }) {
  return <button>{text}</button>
}
// After dev, DOM will have:
// <button data-lov-id="src/Button.tsx:3:10" data-lov-name="button" ...>Hello</button>