Registry / devops / babel-plugin-react-dev-locator

babel-plugin-react-dev-locator

library1.0.6jsnpmunverified

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.

devops

npm install babel-plugin-react-dev-locator

package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-dev-locator

devopsjavascriptv1.0.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

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

default (type)

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

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

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

babel.config.js usage

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

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

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

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" />

Debug

Known issues

breakingPlugin 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.

affects: <1.0.0

gotchaThe 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).

affects: >=1.0.0

gotchaPlugin 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'] : []

affects: >=1.0.0

deprecatedNo recent updates; last publish 2021. May not support newer Babel versions.

fix

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

affects: >=1.0.0

Errors

Common errors & fixes

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

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'.

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

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().

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

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

fix

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

Upgrade

Version history

1.0.6latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/babel-plugin-react-dev-locator ↗