babel-plugin-jsxfileattribute

1.1.5 verified Sat Apr 25 auth: no javascript

A Babel plugin for React that automatically injects file location metadata (data-render-file-name, data-line, data-awakeide) into JSX elements to aid debugging and development. Version 1.1.5 requires @babel/core ^7.0.0-0 as a peer dependency. It allows custom options like userSetPwd for monorepo support, exclusions for Fragment components, and toggles for showing complete file paths. Designed primarily for development environments.

Common errors

error Module not found: Error: Can't resolve 'babel-plugin-jsxfileattribute' ↓

cause Package not installed or typo in package name.

fix

Run npm install babel-plugin-jsxfileattribute --save-dev

error TypeError: babelPluginJsxFileAttribute is not a function ↓

cause Using import { babelPluginJsxFileAttribute } ... instead of default import/require.

fix

Change to const babelPluginJsxFileAttribute = require('babel-plugin-jsxfileattribute');

error Uncaught Error: @babel/core is required as a peer dependency ↓

cause @babel/core is missing or version incompatible.

fix

Install @babel/core: npm install @babel/core --save-dev

Warnings

gotcha Plugin must only be used in development environment to avoid leaking file paths to production. ↓

fix Wrap plugin addition with process.env.NODE_ENV === 'development' condition.

gotcha Options like showCompleteFilePath and isShowAwakeIdeMsg have default values that may conflict with user overrides. ↓

fix Explicitly define all options to ensure expected behavior.

gotcha Exclude list is case-sensitive; default is ["Fragment", "React.Fragment"]. Typing "fragment" will not exclude. ↓

fix Use exact casing as shown in documentation.

breaking Only CommonJS require works; attempting ESM import results in undefined default export. ↓

fix Use const plugin = require('babel-plugin-jsxfileattribute'); instead of import.

Install

npm install babel-plugin-jsxfileattribute

yarn add babel-plugin-jsxfileattribute

pnpm add babel-plugin-jsxfileattribute

Imports

babelPluginJsxFileAttribute

wrong

import babelPluginJsxFileAttribute from 'babel-plugin-jsxfileattribute';

correct

const babelPluginJsxFileAttribute = require('babel-plugin-jsxfileattribute');

This package does not export ESM; use CommonJS require. No default export name is documented.

default (ESM alternative)

wrong

import { babelPluginJsxFileAttribute } from 'babel-plugin-jsxfileattribute';

correct

import pkg from 'babel-plugin-jsxfileattribute'; const babelPluginJsxFileAttribute = pkg.default || pkg;

Named import is not supported. Use default import and possibly access .default.

plugin usage in babel.config.js
wrong
```
plugins: ['babel-plugin-jsxfileattribute']
```
correct
```
plugins: [[ require('babel-plugin-jsxfileattribute'), { options } ]]
```
Must call require() to get the function, not pass string. Options object is optional.

Quickstart

This shows how to configure the plugin for development, enabling file attribute injection with options.

// babel.config.js
module.exports = {
  plugins: [
    process.env.NODE_ENV === 'development' && [
      require('babel-plugin-jsxfileattribute'),
      {
        userSetPwd: '/path/to/cut',
        isShowAwakeIdeMsg: true,
        onlyShowAwakeIdeMsg: true,
        showCompleteFilePath: false,
        exclude: ["Fragment", "React.Fragment"]
      }
    ]
  ].filter(Boolean)
};