{"id":42234,"library":"vite-plugin-jsx-source-attrs","title":"vite-plugin-jsx-source-attrs","description":"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.","status":"active","version":"0.2.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","react","babel","jsx","source-location","typescript"],"install":[{"cmd":"npm install vite-plugin-jsx-source-attrs","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-jsx-source-attrs","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-jsx-source-attrs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required for Babel transformation of JSX","package":"@babel/core","optional":false}],"imports":[{"note":"Named export, not default. TypeScript included.","wrong":"import vitePluginJsxSourceAttrs from 'vite-plugin-jsx-source-attrs'","symbol":"vitePluginJsxSourceAttrs","correct":"import { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs'"},{"note":"Type only; use import type for clarity.","wrong":"import { VitePluginJsxSourceAttrsOptions } from 'vite-plugin-jsx-source-attrs'","symbol":"VitePluginJsxSourceAttrsOptions","correct":"import type { VitePluginJsxSourceAttrsOptions } from 'vite-plugin-jsx-source-attrs'"},{"note":"Babel plugin utility export. ESM only; no CJS require.","wrong":"const jsxSourceAttrs = require('vite-plugin-jsx-source-attrs')","symbol":"jsxSourceAttrs","correct":"import { jsxSourceAttrs } from 'vite-plugin-jsx-source-attrs'"}],"quickstart":{"code":"// Install: bun add -D vite-plugin-jsx-source-attrs\n// vite.config.ts\nimport react from '@vitejs/plugin-react';\nimport { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig(({ mode }) => ({\n  plugins: [\n    vitePluginJsxSourceAttrs({\n      enabled: mode === 'development',\n      attributeName: 'data-source-location',\n      componentAttributeName: 'data-component-source-location',\n    }),\n    react(),\n  ],\n}));","lang":"typescript","description":"Shows how to install and configure the Vite plugin with @vitejs/plugin-react, enabling source attributes only in development."},"warnings":[{"fix":"Upgrade @babel/core to 7.20.0 or later","message":"Requires @babel/core >=7.20.0","severity":"breaking","affected_versions":"<0.1.0"},{"fix":"Ensure devDependencies are installed at build time; use npm install (not npm ci --omit=dev) or equivalent","message":"This package is a devDependency but must be installed during CI/CD for production builds because vite.config.ts evaluates it","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use vitePluginJsxSourceAttrs() in plugins array instead of adding to babel plugins","message":"Vite 8 + @vitejs/plugin-react 6 do not support react({ babel: { plugins: [...] } }); you must use the standalone Vite plugin","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Remove @wix/babel-plugin-jsx-source-attrs from dependencies and Babel config, replace with this package","message":"Older projects may have @wix/babel-plugin-jsx-source-attrs configured directly; this package replaces that pattern","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Ensure no prior attribute with matching name is set manually; the plugin only adds if absent","message":"If 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","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use import syntax; do not use require()","message":"ESM-only package; no CommonJS support","severity":"breaking","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'0.2.1':24 '7.20.0':103 'across':34 'ad':83 'ad-hoc':82 'add':42 'analyt':36 'attr':6 'attribut':14,57,67 'attributenam':99 'babel':85,125 'babel/core':102 'build':113,116 'central':29 'ci':121 'compon':52,56 'componentattributenam':100 'configur':87 'current':21 'custom':55 'data':44,51 'data-component-source-loc':50 'data-source-loc':43 'dedupl':64 'depend':107,111 'dev':109 'dev-on':108 'devdepend':119 'develop':20 'disabl':61 'element':17,48 'enabl':98 'exist':66 'extract':27 'hoc':84 'includ':118 'inject':11 'interfac':94 'intrins':47 'javascript':122 'jsx':4,16,126 'locat':13,46,54,129 'mfe':37 'modul':73 'multipl':35 'must':117 'normal':69 'offer':89 'option':97 'origin':32 'os':75 'packag':26 'path':68,76 'pattern':31 'peer':106 'plugin':3,9,86,93 'prefix':74 'product':63,115 'project':38 'query/hash':70 'react':19,124 'remov':71 'requir':101 'scatter':33 'separ':77 'simpl':96 'sourc':5,12,45,53,128 'source-loc':127 'stabl':22 'support':59 'time':114 'type':80 'typescript':79,130 'unifi':91 'unlik':81 'use':39 'version':23 'virtual':72 'vite':2,92,123 'vite-plugin-jsx-source-attr':1 'vite/babel':8 'wix/babel-plugin-jsx-source-attrs':40","created_at":"2026-06-04T18:56:16.122693+00:00","updated_at":"2026-06-04T18:56:16.122693+00:00","problems":[{"fix":"Run `npm install -D vite-plugin-jsx-source-attrs` and ensure CI installs devDependencies","cause":"Package not installed (likely missing from dependencies or devDependencies, or CI ran with --omit=dev)","error":"Cannot find module 'vite-plugin-jsx-source-attrs'"},{"fix":"Upgrade @babel/core to >=7.20.0","cause":"Outdated @babel/core version (<7.20.0)","error":"Error: Babel plugin @babel/plugin-transform-react-jsx-source is not a function"},{"fix":"Use `import { vitePluginJsxSourceAttrs } from 'vite-plugin-jsx-source-attrs'`","cause":"Incorrect import: using default import instead of named import","error":"TypeError: vitePluginJsxSourceAttrs is not a function"},{"fix":"Convert to ESM in package.json (\"type\": \"module\") or use dynamic import()","cause":"ESM-only package; project using CommonJS (require) and not configured for ESM","error":"Module not found: Can't resolve 'vite-plugin-jsx-source-attrs' in '...'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://git.hyeon.pro/space/tools/vite-plugin-jsx-source-attrs","github":null,"docs":null,"changelog":null,"pypi":null,"npm":"vite-plugin-jsx-source-attrs","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}