babel-plugin-react-displayname-path

1.1.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error displayName not added to my component ↓

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

Warnings

gotcha Plugin must be placed before other plugins in the Babel plugins array to work correctly. ↓

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

Install

npm install babel-plugin-react-displayname-path

yarn add babel-plugin-react-displayname-path

pnpm add babel-plugin-react-displayname-path

Imports

babel-plugin-react-displayname-path

wrong

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

correct

// In .babelrc or babel.config.js:
{
  "plugins": ["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

wrong

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

correct

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

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

Quickstart

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