Registry / babel-plugin-react-displayname-path

babel-plugin-react-displayname-path

library1.1.0jsnpmunverified

Babel plugin that automatically sets the `displayName` property for React components by prefixing the component name with its file path relative to the project root. Version 1.1.0 is stable and rarely updated. It supports function components returning JSX and class components. Unlike other displayName plugins, this one includes the file path prefix, making component stack traces more readable in production builds. Must be placed before other plugins in the Babel config to work correctly. No known security issues.

npm install babel-plugin-react-displayname-path

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-displayname-path

javascriptv1.1.0

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.

babel-plugin-react-displayname-path

✓ // In .babelrc or babel.config.js: { "plugins": ["react-displayname-path"] }

✗ // Using require() without registering as a plugin: const plugin = require('babel-plugin-react-displayname-path');

This is a Babel plugin, not a direct import. Register it in Babel config as a string in the plugins array.

Babel plugin array entry

✓ // babel.config.js module.exports = { plugins: ['react-displayname-path'] };

✗ // Importing as ES module: import plugin from 'babel-plugin-react-displayname-path';

Babel plugins are specified by name in config, not imported in source code.

Install via yarn, add to Babel config plugins array (before other plugins), then production builds include file paths in component displayName.

// Install: yarn add babel-plugin-react-displayname-path -D // babel.config.js module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['react-displayname-path'] }; // After build, component stack traces will show file paths: // Example error output: // in src/components/Button // in App // in div // in Unknown

Debug

Known issues

gotchaPlugin must be placed before other plugins in the Babel plugins array to work correctly.

fix

Reorder plugins: put 'react-displayname-path' first.

affects: >=1.0.0

Errors

Common errors & fixes

displayName not added to my component

Plugin placed after other plugins or not included in Babel config.

fix

Ensure plugin is added to the plugins array and is before any other plugins.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

@babel/corerequiredpeer dependency required for Babel plugin runtime

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/sergei-startsev/babel-plugin-react-displayname-path ↗

packagehttps://www.npmjs.com/package/babel-plugin-react-displayname-path ↗