Registry / devops / vite-plugin-jsx-source-attrs

vite-plugin-jsx-source-attrs

library0.2.1jsnpmunverified

A Vite/Babel plugin for injecting source location attributes into JSX elements during React development. Current stable version: 0.2.1. This package extracts and centralizes the pattern originally scattered across multiple Analytics MFE projects using @wix/babel-plugin-jsx-source-attrs. It adds data-source-location (intrinsic elements) and data-component-source-location (custom components) attributes, with support for disabling in production, deduplication of existing attributes, path normalization (query/hash removal, virtual module prefixes, OS path separators), and TypeScript types. Unlike ad-hoc Babel plugin configurations, this offers a unified Vite plugin interface with simple options (enabled, attributeName, componentAttributeName). Requires @babel/core >=7.20.0 as a peer dependency. Dev-only dependency for build time; production builds must include devDependencies during CI.

devops

npm install vite-plugin-jsx-source-attrs

package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-JSX-SO

vite-plugin-jsx-source-attrs

devopsjavascriptv0.2.1

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.

vitePluginJsxSourceAttrs

✓ import { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs'

✗ import vitePluginJsxSourceAttrs from 'vite-plugin-jsx-source-attrs'

Named export, not default. TypeScript included.

VitePluginJsxSourceAttrsOptions

✓ import type { VitePluginJsxSourceAttrsOptions } from 'vite-plugin-jsx-source-attrs'

✗ import { VitePluginJsxSourceAttrsOptions } from 'vite-plugin-jsx-source-attrs'

Type only; use import type for clarity.

jsxSourceAttrs

✓ import { jsxSourceAttrs } from 'vite-plugin-jsx-source-attrs'

✗ const jsxSourceAttrs = require('vite-plugin-jsx-source-attrs')

Babel plugin utility export. ESM only; no CJS require.

Shows how to install and configure the Vite plugin with @vitejs/plugin-react, enabling source attributes only in development.

// Install: bun add -D vite-plugin-jsx-source-attrs // vite.config.ts import react from '@vitejs/plugin-react'; import { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs'; import { defineConfig } from 'vite'; export default defineConfig(({ mode }) => ({ plugins: [ vitePluginJsxSourceAttrs({ enabled: mode === 'development', attributeName: 'data-source-location', componentAttributeName: 'data-component-source-location', }), react(), ], }));

Debug

Known issues

breakingRequires @babel/core >=7.20.0

fix

Upgrade @babel/core to 7.20.0 or later

affects: <0.1.0

gotchaThis package is a devDependency but must be installed during CI/CD for production builds because vite.config.ts evaluates it

fix

Ensure devDependencies are installed at build time; use npm install (not npm ci --omit=dev) or equivalent

affects: >=0.0.0

gotchaVite 8 + @vitejs/plugin-react 6 do not support react({ babel: { plugins: [...] } }); you must use the standalone Vite plugin

fix

Use vitePluginJsxSourceAttrs() in plugins array instead of adding to babel plugins

affects: >=0.2.0

deprecatedOlder projects may have @wix/babel-plugin-jsx-source-attrs configured directly; this package replaces that pattern

fix

Remove @wix/babel-plugin-jsx-source-attrs from dependencies and Babel config, replace with this package

affects: >=0.0.0

gotchaIf an attribute with the same name already exists on an element, the plugin will not duplicate it, which may bypass expected injection in some edge cases

fix

Ensure no prior attribute with matching name is set manually; the plugin only adds if absent

affects: >=0.0.0

breakingESM-only package; no CommonJS support

fix

Use import syntax; do not use require()

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module 'vite-plugin-jsx-source-attrs'

Package not installed (likely missing from dependencies or devDependencies, or CI ran with --omit=dev)

fix

Run `npm install -D vite-plugin-jsx-source-attrs` and ensure CI installs devDependencies

Error: Babel plugin @babel/plugin-transform-react-jsx-source is not a function

Outdated @babel/core version (<7.20.0)

fix

Upgrade @babel/core to >=7.20.0

TypeError: vitePluginJsxSourceAttrs is not a function

Incorrect import: using default import instead of named import

fix

Use `import { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs'`

Module not found: Can't resolve 'vite-plugin-jsx-source-attrs' in '...'

ESM-only package; project using CommonJS (require) and not configured for ESM

fix

Convert to ESM in package.json ("type": "module") or use dynamic import()

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

@babel/corerequiredrequired for Babel transformation of JSX

Agent activity

8 hits · last 30 days

node

Resources

packagevite-plugin-jsx-source-attrs ↗

homepagehttps://git.hyeon.pro/space/tools/vite-plugin-jsx-source-attrs ↗