babel-plugin-react-dev-locator

1.0.6 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'babel-plugin-react-dev-locator' ↓

cause Plugin not installed or not in node_modules.

fix

Run 'npm install -D babel-plugin-react-dev-locator' or 'yarn add -D babel-plugin-react-dev-locator'.

error TypeError: (0 , _babelPluginReactDevLocator.default) is not a function ↓

cause Using CJS require() without .default when plugin is an ESM default export.

fix

Use string plugin name in Babel config: plugins: ['babel-plugin-react-dev-locator'] instead of require().

error Module parse failed: Unexpected token (1:0) in file with JSX ↓

cause Babel is not configured to handle JSX. The plugin alone does not enable JSX parsing.

fix

Add '@babel/preset-react' to your Babel presets.

Warnings

breaking Plugin does not work with Babel <7 or Node <12. Ensure Babel 7+ and Node >=12. ↓

fix Upgrade Babel to 7.x and Node to >=12.

gotcha The injected attributes are prefixed with 'trae-inspector-'. If you use a different inspector, you may need to configure attribute names. ↓

fix Check plugin options to customize attribute prefixes (none currently documented).

gotcha Plugin only works in development builds. In production, disable the plugin to avoid unnecessary attributes. ↓

fix Use environment-based Babel config: plugins: process.env.NODE_ENV !== 'production' ? ['babel-plugin-react-dev-locator'] : []

deprecated No recent updates; last publish 2021. May not support newer Babel versions. ↓

fix Consider alternatives like babel-plugin-jsx-source or custom Babel plugin.

Install

npm install babel-plugin-react-dev-locator

yarn add babel-plugin-react-dev-locator

pnpm add babel-plugin-react-dev-locator

Imports

default

wrong

const babelPluginReactDevLocator = require('babel-plugin-react-dev-locator')

correct

import babelPluginReactDevLocator from 'babel-plugin-react-dev-locator'

ESM default import preferred. CJS require works but may need .default.

default (type)

wrong

import { babelPluginReactDevLocator } from 'babel-plugin-react-dev-locator'

correct

import type { PluginObj } from '@babel/core';
import babelPluginReactDevLocator from 'babel-plugin-react-dev-locator';
const plugin: PluginObj = babelPluginReactDevLocator

No named export; use default import. TypeScript type is inferred from package types.

babel.config.js usage

wrong

module.exports = {
  plugins: [require('babel-plugin-react-dev-locator')]
}

correct

module.exports = {
  plugins: ['babel-plugin-react-dev-locator']
}

Use string plugin name in config; require() works but is not idiomatic.

Quickstart

Shows how to install and configure the plugin, then demonstrates JSX transformation with source location attributes.

// Install: npm i -D babel-plugin-react-dev-locator

// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-react-dev-locator'
  ]
};

// Component.jsx (input)
function App() {
  return <div />;
}

// Output: <div trae-inspector-file-path="src/App.jsx" trae-inspector-start-line="4" trae-inspector-start-column="12" />