{"id":19131,"library":"babel-plugin-react-dev-locator","title":"babel-plugin-react-dev-locator","description":"A Babel plugin that injects source code location info (file path, line, column) into JSX element attributes for development use. Version 1.0.6, minimal configuration, adds custom data attributes like trae-inspector-file-path. Lightweight alternative to similar dev tools, focused on integration with Trae IDE or custom inspectors. Ships TypeScript types, requires Node >=12.","status":"active","version":"1.0.6","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install babel-plugin-react-dev-locator","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-dev-locator","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-dev-locator","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM default import preferred. CJS require works but may need .default.","wrong":"const babelPluginReactDevLocator = require('babel-plugin-react-dev-locator')","symbol":"default","correct":"import babelPluginReactDevLocator from 'babel-plugin-react-dev-locator'"},{"note":"No named export; use default import. TypeScript type is inferred from package types.","wrong":"import { babelPluginReactDevLocator } from 'babel-plugin-react-dev-locator'","symbol":"default (type)","correct":"import type { PluginObj } from '@babel/core';\nimport babelPluginReactDevLocator from 'babel-plugin-react-dev-locator';\nconst plugin: PluginObj = babelPluginReactDevLocator"},{"note":"Use string plugin name in config; require() works but is not idiomatic.","wrong":"module.exports = {\n  plugins: [require('babel-plugin-react-dev-locator')]\n}","symbol":"babel.config.js usage","correct":"module.exports = {\n  plugins: ['babel-plugin-react-dev-locator']\n}"}],"quickstart":{"code":"// Install: npm i -D babel-plugin-react-dev-locator\n\n// babel.config.js\nmodule.exports = {\n  plugins: [\n    'babel-plugin-react-dev-locator'\n  ]\n};\n\n// Component.jsx (input)\nfunction App() {\n  return <div />;\n}\n\n// Output: <div trae-inspector-file-path=\"src/App.jsx\" trae-inspector-start-line=\"4\" trae-inspector-start-column=\"12\" />","lang":"javascript","description":"Shows how to install and configure the plugin, then demonstrates JSX transformation with source location attributes."},"warnings":[{"fix":"Upgrade Babel to 7.x and Node to >=12.","message":"Plugin does not work with Babel <7 or Node <12. Ensure Babel 7+ and Node >=12.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Check plugin options to customize attribute prefixes (none currently documented).","message":"The injected attributes are prefixed with 'trae-inspector-'. If you use a different inspector, you may need to configure attribute names.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use environment-based Babel config: plugins: process.env.NODE_ENV !== 'production' ? ['babel-plugin-react-dev-locator'] : []","message":"Plugin only works in development builds. In production, disable the plugin to avoid unnecessary attributes.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider alternatives like babel-plugin-jsx-source or custom Babel plugin.","message":"No recent updates; last publish 2021. May not support newer Babel versions.","severity":"deprecated","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 -D babel-plugin-react-dev-locator' or 'yarn add -D babel-plugin-react-dev-locator'.","cause":"Plugin not installed or not in node_modules.","error":"Error: Cannot find module 'babel-plugin-react-dev-locator'"},{"fix":"Use string plugin name in Babel config: plugins: ['babel-plugin-react-dev-locator'] instead of require().","cause":"Using CJS require() without .default when plugin is an ESM default export.","error":"TypeError: (0 , _babelPluginReactDevLocator.default) is not a function"},{"fix":"Add '@babel/preset-react' to your Babel presets.","cause":"Babel is not configured to handle JSX. The plugin alone does not enable JSX parsing.","error":"Module parse failed: Unexpected token (1:0) in file with JSX"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}