lovable-tagger

library1.3.0jsnpmunverified

Vite plugin (v1.3.0) that automatically adds `data-component-id` attributes to JSX/TSX components for easier debugging and tracking. Ships TypeScript types, supports Vite 5.x–8.x. Differentiated by its simplicity and focus on component-level identification, as opposed to heavier instrumentation tools. Released under a stable, infrequent cadence.

devops

npm install lovable-tagger

package ↗

INSTALL

IMPORT

SIG · LOVABLE-TAGGER

lovable-tagger

devopsjavascriptv1.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

componentTagger

✓ import { componentTagger } from 'lovable-tagger'

✗ import componentTagger from 'lovable-tagger'

Must use named import; no default export exists.

componentTagger

✓ const { componentTagger } = require('lovable-tagger')

✗ const componentTagger = require('lovable-tagger')

CJS requires destructuring; package exports an object.

componentTagger (type)

✓ import type { Plugin } from 'vite'; const plugin: Plugin = componentTagger();

✗ const plugin = componentTagger<Plugin>()

TypeScript usage: plugin is typed via Vite's Plugin interface, not generic.

Shows minimal Vite config to enable component tagging with default options.

import { defineConfig } from 'vite'; import { componentTagger } from 'lovable-tagger'; export default defineConfig({ plugins: [ componentTagger() ] }); // After this, all JSX/TSX elements will have a data-component-id attribute like: // <div data-component-id="MyComponent">...</div>

Debug

Known issues

breakingVersion 1.0.0 changed plugin API from options object to factory function (componentTagger({...}) instead of new ComponentTagger(options)).

fix

Update import and usage: replace `new ComponentTagger(options)` with `componentTagger(options)`.

affects: <1.0.0

deprecatedThe `ignorePatterns` option was deprecated in v1.2.0 in favor of `exclude`.

fix

Replace `ignorePatterns: ['**/node_modules/**']` with `exclude: ['**/node_modules/**']`.

affects: >=1.2.0

gotchaData attributes are only added during production builds by default; to enable in dev, set `dev: true`.

fix

Use `componentTagger({ dev: true })` to enable tagging during development.

affects: >=1.0.0

breakingVite peer dependency bumped to >=5.0.0 in v1.3.0; drops support for Vite 4.x.

fix

Upgrade Vite to v5 or higher. If sticking with Vite 4, lock to lovable-tagger@1.2.x.

affects: >=1.3.0

gotchaPlugin does not tag components inside node_modules by default; only files in project root are processed.

fix

Use `include` option to add extra paths, e.g., `componentTagger({ include: ['src/**', 'packages/**'] })`.

affects: >=1.0.0

Errors

Common errors & fixes

Error: 'componentTagger' is not exported from 'lovable-tagger'

Using default import instead of named import.

fix

Change import to `import { componentTagger } from 'lovable-tagger'`.

TypeError: componentTagger is not a function

Using old API with `new componentTagger()` or incorrect require style.

fix

Call as `componentTagger()` without `new`, or destructure CJS require: `const { componentTagger } = require('lovable-tagger')`.

Unhandled rejection: Error: The tagger plugin requires Vite >=5.0.0.

Project uses Vite 4.x with lovable-tagger >=1.3.0.

fix

Upgrade Vite to v5+ or downgrade lovable-tagger to 1.2.x.

Warning: Option 'ignorePatterns' is deprecated. Use 'exclude' instead.

Using deprecated `ignorePatterns` option in v1.2+.

fix

Rename the option to `exclude` in the plugin config.

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

viterequiredPeer dependency; plugin requires Vite >=5.0.0 <9.0.0 to hook into build/transform pipeline

Agent activity

8 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/lovable-tagger ↗