{"id":25906,"library":"lovable-tagger","title":"lovable-tagger","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","plugin","component","tagger","tailwind","typescript"],"install":[{"cmd":"npm install lovable-tagger","lang":"bash","label":"npm"},{"cmd":"yarn add lovable-tagger","lang":"bash","label":"yarn"},{"cmd":"pnpm add lovable-tagger","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires Vite >=5.0.0 <9.0.0 to hook into build/transform pipeline","package":"vite","optional":false}],"imports":[{"note":"Must use named import; no default export exists.","wrong":"import componentTagger from 'lovable-tagger'","symbol":"componentTagger","correct":"import { componentTagger } from 'lovable-tagger'"},{"note":"CJS requires destructuring; package exports an object.","wrong":"const componentTagger = require('lovable-tagger')","symbol":"componentTagger","correct":"const { componentTagger } = require('lovable-tagger')"},{"note":"TypeScript usage: plugin is typed via Vite's Plugin interface, not generic.","wrong":"const plugin = componentTagger<Plugin>()","symbol":"componentTagger (type)","correct":"import type { Plugin } from 'vite'; const plugin: Plugin = componentTagger();"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport { componentTagger } from 'lovable-tagger';\n\nexport default defineConfig({\n  plugins: [\n    componentTagger()\n  ]\n});\n\n// After this, all JSX/TSX elements will have a data-component-id attribute like:\n// <div data-component-id=\"MyComponent\">...</div>","lang":"typescript","description":"Shows minimal Vite config to enable component tagging with default options."},"warnings":[{"fix":"Update import and usage: replace `new ComponentTagger(options)` with `componentTagger(options)`.","message":"Version 1.0.0 changed plugin API from options object to factory function (componentTagger({...}) instead of new ComponentTagger(options)).","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Replace `ignorePatterns: ['**/node_modules/**']` with `exclude: ['**/node_modules/**']`.","message":"The `ignorePatterns` option was deprecated in v1.2.0 in favor of `exclude`.","severity":"deprecated","affected_versions":">=1.2.0"},{"fix":"Use `componentTagger({ dev: true })` to enable tagging during development.","message":"Data attributes are only added during production builds by default; to enable in dev, set `dev: true`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Vite to v5 or higher. If sticking with Vite 4, lock to lovable-tagger@1.2.x.","message":"Vite peer dependency bumped to >=5.0.0 in v1.3.0; drops support for Vite 4.x.","severity":"breaking","affected_versions":">=1.3.0"},{"fix":"Use `include` option to add extra paths, e.g., `componentTagger({ include: ['src/**', 'packages/**'] })`.","message":"Plugin does not tag components inside node_modules by default; only files in project root are processed.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change import to `import { componentTagger } from 'lovable-tagger'`.","cause":"Using default import instead of named import.","error":"Error: 'componentTagger' is not exported from 'lovable-tagger'"},{"fix":"Call as `componentTagger()` without `new`, or destructure CJS require: `const { componentTagger } = require('lovable-tagger')`.","cause":"Using old API with `new componentTagger()` or incorrect require style.","error":"TypeError: componentTagger is not a function"},{"fix":"Upgrade Vite to v5+ or downgrade lovable-tagger to 1.2.x.","cause":"Project uses Vite 4.x with lovable-tagger >=1.3.0.","error":"Unhandled rejection: Error: The tagger plugin requires Vite >=5.0.0."},{"fix":"Rename the option to `exclude` in the plugin config.","cause":"Using deprecated `ignorePatterns` option in v1.2+.","error":"Warning: Option 'ignorePatterns' is deprecated. Use 'exclude' instead."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}