Registry / web-framework / vite-plugin-source-identifier

vite-plugin-source-identifier

library1.1.2jsnpmunverified

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.

web-framework testing

npm install vite-plugin-source-identifier

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SOURCE

vite-plugin-source-identifier

web-frameworkjavascriptv1.1.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.

sourceIdentifierPlugin

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

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

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

SourceIdentifierOptions

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

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

TypeScript type-only import to avoid emitting runtime code.

Plugin usage in vite.config.ts

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

✗ 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.

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>

Debug

Known issues

gotchaPlugin 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).

affects: >=0.0.0

gotchaThe `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.

affects: >=0.0.0

gotchaProperty 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.

affects: >=0.0.0

breakingVersion 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.

affects: <1.0.0

gotchaPlugins 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.

affects: >=0.0.0

Errors

Common errors & fixes

Error: "Unsupported file extension: .js"

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

fix

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

TypeError: sourceIdentifierPlugin is not a function

Default import used instead of named import.

fix

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

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

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

fix

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

Upgrade

Version history

1.1.2latest on npm

Audit

Dependencies

viterequiredpeer dependency: plugin requires Vite >=5.0.0

Agent activity

30 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-source-identifier ↗