babel-plugin-add-react-displayname

0.0.6-beta verified Sat Apr 25 auth: no javascript maintenance

A Babel 7 plugin that automatically adds displayName to React components, including ES6 class components and stateless functional components returning JSX. Version 0.0.6-beta is the latest stable release. The plugin helps ensure meaningful component names appear in React DevTools and production builds. Unlike other solutions, it focuses solely on displayName addition and works alongside Babel's built-in support for React.createClass. Maintained by paradoxxxzero as a fork of the original plugin updated for Babel 7 compatibility.

Common errors

error SyntaxError: Unexpected token (8:4) > 8 | return <div>Hello</div>; ↓

cause Missing Babel preset for JSX (e.g., @babel/preset-react).

fix

Install @babel/preset-react and add it to your Babel config: { "presets": ["@babel/preset-react"] }

error ReferenceError: React is not defined ↓

cause Component uses JSX without importing React.

fix

Add import React from 'react' or use the new JSX transform (React 17+).

Warnings

gotcha Plugin order matters if using decorators: place this plugin before transform-decorators-legacy ↓

fix Ensure 'add-react-displayname' appears before 'transform-decorators-legacy' in the plugins list.

Install

npm install babel-plugin-add-react-displayname-babel7

yarn add babel-plugin-add-react-displayname-babel7

pnpm add babel-plugin-add-react-displayname-babel7

Imports

default
wrong
```
require('babel-plugin-add-react-displayname')
```
correct
This is a Babel plugin, not imported in source code. It is configured in .babelrc or babel.config.js as a plugin string.
add-react-displayname
Plugin name used in .babelrc plugins array.

Quickstart

Shows installation and configuration of the plugin along with a simple functional component that automatically gets a displayName.

// Install the plugin
// npm install --save-dev babel-plugin-add-react-displayname

// Configure in .babelrc
{
  "plugins": ["add-react-displayname"]
}

// Example React component that will receive displayName
function MyComponent() {
  return <div>Hello</div>;
}

// After Babel transforms, MyComponent.displayName = 'MyComponent'