pp-tagger

1.0.3 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error: Module not found: Can't resolve 'pp-tagger' ↓

cause Package not installed or typo in package name.

fix

Run npm install pp-tagger and ensure the import path is correct.

error TypeError: ppTagger is not a function ↓

cause Incorrect import (default vs named) or older CommonJS require.

fix

Use import ppTagger from 'pp-tagger' (ESM). If using CommonJS, use dynamic import: const ppTagger = (await import('pp-tagger')).default;

error Warning: plugin pp-tagger requires Vite ^5.0.0 || ^8.0.0 ↓

cause Outdated Vite version not meeting peer dependency range.

fix

Update Vite: npm install vite@^5.0.0 or vite@^8.0.0.

Warnings

gotcha Plugin only affects JSX/TSX files; plain JavaScript or non-JSX files won't get tagged. ↓

fix Convert files to JSX/TSX or use a different method for non-JSX components.

breaking Version 1.0.0 renamed the package from @test/plugin to pp-tagger; old imports break. ↓

fix Update import paths from '@test/plugin' to 'pp-tagger'.

deprecated The previous name '@test/plugin' is deprecated and will not receive updates. ↓

fix Switch to 'pp-tagger' package.

Install

npm install pp-tagger

yarn add pp-tagger

pnpm add pp-tagger

Imports

default (ppTagger)

wrong

const ppTagger = require('pp-tagger')

correct

import ppTagger from 'pp-tagger'

ESM-only; CommonJS require will fail.

ppTagger
wrong
```
import ppTagger from 'pp-tagger'
```
correct
```
import { ppTagger } from 'pp-tagger'
```
Named export also available; both work for default export.
ppTagger (type)
```
import type { ppTagger } from 'pp-tagger'
```
TypeScript type import for type-checking without runtime.

Quickstart

Demonstrates basic setup in Vite config with component tagging, including optional exclude and attribute options.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ppTagger from 'pp-tagger';

export default defineConfig({
  plugins: [
    react(),
    ppTagger({
      // Optional: exclude specific components
      exclude: ['SomeComponent'],
      // Optional: attribute prefix (default: 'data-component-id')
      attribute: 'data-component-id',
    }),
  ],
});

// After build, components get <div data-component-id="MyComponent">...</div>