{"id":19095,"library":"babel-plugin-jsxfileattribute","title":"babel-plugin-jsxfileattribute","description":"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.","status":"active","version":"1.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/webgzh907247189/babel-plugin","tags":["javascript","babel","plugin","jsxfileattribute","source","file","conmponent message"],"install":[{"cmd":"npm install babel-plugin-jsxfileattribute","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-jsxfileattribute","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-jsxfileattribute","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for Babel plugin system","package":"@babel/core","optional":false}],"imports":[{"note":"This package does not export ESM; use CommonJS require. No default export name is documented.","wrong":"import babelPluginJsxFileAttribute from 'babel-plugin-jsxfileattribute';","symbol":"babelPluginJsxFileAttribute","correct":"const babelPluginJsxFileAttribute = require('babel-plugin-jsxfileattribute');"},{"note":"Named import is not supported. Use default import and possibly access .default.","wrong":"import { babelPluginJsxFileAttribute } from 'babel-plugin-jsxfileattribute';","symbol":"default (ESM alternative)","correct":"import pkg from 'babel-plugin-jsxfileattribute'; const babelPluginJsxFileAttribute = pkg.default || pkg;"},{"note":"Must call require() to get the function, not pass string. Options object is optional.","wrong":"plugins: ['babel-plugin-jsxfileattribute']","symbol":"plugin usage in babel.config.js","correct":"plugins: [[ require('babel-plugin-jsxfileattribute'), { options } ]]"}],"quickstart":{"code":"// babel.config.js\nmodule.exports = {\n  plugins: [\n    process.env.NODE_ENV === 'development' && [\n      require('babel-plugin-jsxfileattribute'),\n      {\n        userSetPwd: '/path/to/cut',\n        isShowAwakeIdeMsg: true,\n        onlyShowAwakeIdeMsg: true,\n        showCompleteFilePath: false,\n        exclude: [\"Fragment\", \"React.Fragment\"]\n      }\n    ]\n  ].filter(Boolean)\n};\n","lang":"javascript","description":"This shows how to configure the plugin for development, enabling file attribute injection with options."},"warnings":[{"fix":"Wrap plugin addition with process.env.NODE_ENV === 'development' condition.","message":"Plugin must only be used in development environment to avoid leaking file paths to production.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Explicitly define all options to ensure expected behavior.","message":"Options like showCompleteFilePath and isShowAwakeIdeMsg have default values that may conflict with user overrides.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use exact casing as shown in documentation.","message":"Exclude list is case-sensitive; default is [\"Fragment\", \"React.Fragment\"]. Typing \"fragment\" will not exclude.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use const plugin = require('babel-plugin-jsxfileattribute'); instead of import.","message":"Only CommonJS require works; attempting ESM import results in undefined default export.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install babel-plugin-jsxfileattribute --save-dev","cause":"Package not installed or typo in package name.","error":"Module not found: Error: Can't resolve 'babel-plugin-jsxfileattribute'"},{"fix":"Change to const babelPluginJsxFileAttribute = require('babel-plugin-jsxfileattribute');","cause":"Using import { babelPluginJsxFileAttribute } ... instead of default import/require.","error":"TypeError: babelPluginJsxFileAttribute is not a function"},{"fix":"Install @babel/core: npm install @babel/core --save-dev","cause":"@babel/core is missing or version incompatible.","error":"Uncaught Error: @babel/core is required as a peer dependency"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}