Registry / babel-plugin-add-react-displayname-babel7

babel-plugin-add-react-displayname-babel7

library0.0.6-betajsnpmunverified

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.

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

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-ADD-R

babel-plugin-add-react-displayname-babel7

javascriptv0.0.6-beta

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

default

✓

✗ require('babel-plugin-add-react-displayname')

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.

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'

Debug

Known issues

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

affects: >=0.0.0

Errors

Common errors & fixes

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

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"] }

ReferenceError: React is not defined

Component uses JSX without importing React.

fix

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

Upgrade

Version history

0.0.6-betalatest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/paradoxxxzero/babel-plugin-add-react-displayname ↗

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