babel-plugin-transform-react-stateless-component-name

1.1.2 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin (v1.1.2) that automatically adds a `displayName` property to default-exported stateless (functional) React components, improving readability in React DevTools and snapshot test output. It also adds `displayName` to function declarations and variable assignments. Last released in 2017, this plugin is stable and no longer actively updated. It works with Babel 6.x. Alternatives include using `@babel/plugin-transform-react-display-name` for Babel 7+.

Common errors

error Error: Couldn't find a preset or plugin with the name 'transform-react-stateless-component-name'. ↓

cause Plugin not installed or configured incorrectly.

fix

Run npm install --save-dev babel-plugin-transform-react-stateless-component-name and ensure it's in the plugins array.

error ReferenceError: require is not defined ↓

cause Trying to use `require` in an ES module environment.

fix

This plugin is for Babel configuration, not runtime. Add to .babelrc without require.

Warnings

deprecated This plugin is designed for Babel 6.x and will not work with Babel 7 or later. ↓

fix Use @babel/plugin-transform-react-display-name instead.

gotcha Only adds displayName to default-exported stateless components, not to named exports or class components. ↓

fix Use a different plugin or manually add displayName for named exports.

breaking v1.0.0 introduced breaking changes from previous non-existent versions; initial release. ↓

fix Update to v1.0.0 or later.

gotcha Plugin may crash on block-arrow components with HOC wrappers before v1.1.2. ↓

fix Update to v1.1.2 or later.

Install

npm install babel-plugin-transform-react-stateless-component-name

yarn add babel-plugin-transform-react-stateless-component-name

pnpm add babel-plugin-transform-react-stateless-component-name

Imports

default

wrong

const plugin = require('babel-plugin-transform-react-stateless-component-name')

correct

// No import needed; add to .babelrc plugins array

This is a Babel plugin, not a runtime import. It is configured in .babelrc or equivalent.

Quickstart

Shows adding the plugin to a .babelrc configuration file. No JavaScript import needed.

{
  "plugins": ["transform-react-stateless-component-name"]
}