{"id":21701,"library":"pp-tagger","title":"pp-tagger","description":"Vite plugin that automatically injects data-component-id attributes into JSX/TSX components for debugging and tracking. Current stable version is 1.0.3, released as an alpha package. Compatible with Vite 5 and 8, ships TypeScript types. Differentiator: zero-config automatic tagging vs manual attribute addition.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","plugin","component","tagger","typescript"],"install":[{"cmd":"npm install pp-tagger","lang":"bash","label":"npm"},{"cmd":"yarn add pp-tagger","lang":"bash","label":"yarn"},{"cmd":"pnpm add pp-tagger","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for plugin registration and build pipeline","package":"vite","optional":false}],"imports":[{"note":"ESM-only; CommonJS require will fail.","wrong":"const ppTagger = require('pp-tagger')","symbol":"default (ppTagger)","correct":"import ppTagger from 'pp-tagger'"},{"note":"Named export also available; both work for default export.","wrong":"import ppTagger from 'pp-tagger'","symbol":"ppTagger","correct":"import { ppTagger } from 'pp-tagger'"},{"note":"TypeScript type import for type-checking without runtime.","wrong":"","symbol":"ppTagger (type)","correct":"import type { ppTagger } from 'pp-tagger'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport ppTagger from 'pp-tagger';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    ppTagger({\n      // Optional: exclude specific components\n      exclude: ['SomeComponent'],\n      // Optional: attribute prefix (default: 'data-component-id')\n      attribute: 'data-component-id',\n    }),\n  ],\n});\n\n// After build, components get <div data-component-id=\"MyComponent\">...</div>","lang":"typescript","description":"Demonstrates basic setup in Vite config with component tagging, including optional exclude and attribute options."},"warnings":[{"fix":"Convert files to JSX/TSX or use a different method for non-JSX components.","message":"Plugin only affects JSX/TSX files; plain JavaScript or non-JSX files won't get tagged.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update import paths from '@test/plugin' to 'pp-tagger'.","message":"Version 1.0.0 renamed the package from @test/plugin to pp-tagger; old imports break.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Switch to 'pp-tagger' package.","message":"The previous name '@test/plugin' is deprecated and will not receive updates.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install pp-tagger` and ensure the import path is correct.","cause":"Package not installed or typo in package name.","error":"Error: Module not found: Can't resolve 'pp-tagger'"},{"fix":"Use `import ppTagger from 'pp-tagger'` (ESM). If using CommonJS, use dynamic import: `const ppTagger = (await import('pp-tagger')).default;`","cause":"Incorrect import (default vs named) or older CommonJS require.","error":"TypeError: ppTagger is not a function"},{"fix":"Update Vite: `npm install vite@^5.0.0` or `vite@^8.0.0`.","cause":"Outdated Vite version not meeting peer dependency range.","error":"Warning: plugin pp-tagger requires Vite ^5.0.0 || ^8.0.0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}