babel-plugin-transform-react-es6-displayname

1.0.0-beta1.4 verified Sat Apr 25 auth: no javascript deprecated

A Babel plugin that automatically adds a displayName property to React ES6 class components using the class name. This helps with debugging and DevTools when using ES6 classes. Version 1.0.0-beta1.4 is a pre-release with no recent updates; the repository is archived and unmaintained. It only supports ES6 class components (not functional components) and relies on Babel 6.x. No security issues reported.

Common errors

error Error: Cannot find module 'babel-plugin-transform-react-es6-displayname' ↓

cause Plugin not installed or incorrectly required.

fix

npm install --save-dev babel-plugin-transform-react-es6-displayname

error Error: The plugin "transform-react-es6-displayname" didn't export a Plugin instance ↓

cause Incompatible with Babel 7+; this plugin is for Babel 6.

fix

Use Babel 6 or switch to a compatible plugin.

Warnings

deprecated Repository is archived and unmaintained. ↓

fix Consider using babel-plugin-react-displayname which supports functional components and newer Babel versions.

gotcha Only works with ES6 class components; does not add displayName to functional components. ↓

fix Use a different plugin or manually add displayName for functional components.

Install

npm install babel-plugin-transform-react-es6-displayname

yarn add babel-plugin-transform-react-es6-displayname

pnpm add babel-plugin-transform-react-es6-displayname

Imports

default

wrong

import plugin from 'babel-plugin-transform-react-es6-displayname'; // CommonJS, not ESM

correct

module.exports = require('babel-plugin-transform-react-es6-displayname');
// in .babelrc: "plugins": ["transform-react-es6-displayname"]

This is a Babel plugin, typically loaded via .babelrc or babel.config.js using the string name, not directly imported in application code.

Quickstart

Shows how to add the plugin to .babelrc and the transformation of a class component.

// .babelrc
{
  "plugins": ["transform-react-es6-displayname"]
}

// Input:
class MyComponent extends React.Component {
  render() { return <div>Hello</div>; }
}

// Output:
class MyComponent extends React.Component {
  static displayName = 'MyComponent';
  render() { return <div>Hello</div>; }
}