lovable-tagger

1.3.0 verified Fri May 01 auth: no javascript

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.

Common errors

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

cause Using default import instead of named import.

fix

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

error TypeError: componentTagger is not a function ↓

cause 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').

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

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

fix

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

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

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

fix

Rename the option to exclude in the plugin config.

Warnings

breaking Version 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)`.

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

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

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

breaking Vite 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.

gotcha Plugin 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/**'] })`.

Install

npm install lovable-tagger

yarn add lovable-tagger

pnpm add lovable-tagger

Imports

componentTagger

wrong

import componentTagger from 'lovable-tagger'

correct

import { componentTagger } from 'lovable-tagger'

Must use named import; no default export exists.

componentTagger

wrong

const componentTagger = require('lovable-tagger')

correct

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

CJS requires destructuring; package exports an object.

componentTagger (type)

wrong

const plugin = componentTagger<Plugin>()

correct

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

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

Quickstart

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>