Registry / testing / babel-plugin-react-observer-displayname

babel-plugin-react-observer-displayname

library0.0.2jsnpmunverified

A Babel plugin that automatically adds displayName to observer-wrapped components, primarily for use with mobx-react-lite. Version 0.0.2, last updated in 2022. Unlike manual displayName assignment, this plugin automatically detects observer calls and injects the displayName in development mode via process.env.NODE_ENV === 'development'. It only supports named function expressions and const declarations with arrow functions. No configuration required beyond adding to Babel plugins.

testing

npm install babel-plugin-react-observer-displayname

package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-observer-displayname

testingjavascriptv0.0.2

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

✓ import plugin from 'babel-plugin-react-observer-displayname'

✗ const plugin = require('babel-plugin-react-observer-displayname')

ESM-only; no CommonJS export.

plugin

✓ plugins: ['babel-plugin-react-observer-displayname']

✗ plugins: ['./node_modules/babel-plugin-react-observer-displayname']

Use package name, not path.

Module

✓ module.exports = { plugins: ['babel-plugin-react-observer-displayname'] }

✗ module.exports = { plugins: [require('babel-plugin-react-observer-displayname')] }

When using CJS config, string reference is preferred.

Shows how to install the plugin and the transformation it performs on observer-wrapped components.

// .babelrc { "plugins": ["babel-plugin-react-observer-displayname"] } // Input import { observer } from 'mobx-react-lite'; const MyComponent = observer(props => { return <div>{props.name}</div>; }); // Output (development only) import { observer } from 'mobx-react-lite'; const MyComponent = observer(props => { return <div>{props.name}</div>; }); if (process.env.NODE_ENV === 'development') { MyComponent.displayName = 'observer(MyComponent)'; }

Debug

Known issues

gotchaOnly works with named function expressions and const declarations with arrow functions assigned to observer calls.

fix

Ensure components are defined as 'const MyComponent = observer(...)' or 'function MyComponent() { ... }' wrapped in observer.

affects: >=0.0.0

gotchaDisplayName is only added in development mode (checking process.env.NODE_ENV).

fix

No fix needed; this is intentional for production bundle size.

affects: >=0.0.0

gotchaIf you wrap observer with HoCs (e.g., withRouter(observer(...))), displayName may not be added correctly.

fix

Wrap displayName plugin after other HoCs or manually set displayName.

affects: >=0.0.0

gotchaPlugin does not handle anonymous functions or default exports.

fix

Use named exports or const declarations.

affects: >=0.0.0

gotchaPlugin may conflict with other Babel plugins that transform observer calls or displayName.

fix

Ensure this plugin runs after other observer-related plugins.

affects: >=0.0.0

Errors

Common errors & fixes

DisplayName not added for my component

Component not defined as a named const/function or observer not from mobx-react-lite.

fix

Use 'const MyComponent = observer(...)' or 'function MyComponent() { ... }' and import observer from 'mobx-react-lite'.

Plugin doesn't seem to work

Babel config not loaded correctly or process.env.NODE_ENV not set to 'development'.

fix

Check Babel configuration and set NODE_ENV=development.

Plugin added displayName in production

process.env.NODE_ENV check is removed by minifier or not set.

fix

Ensure NODE_ENV is set to 'production' in production builds and that the conditional is not eliminated by other plugins.

Plugin throws 'Cannot find module' error

Plugin not installed or Babel cannot resolve it.

fix

Run 'npm install babel-plugin-react-observer-displayname --save-dev' and ensure it's listed in Babel config.

Upgrade

Version history

0.0.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

packagebabel-plugin-react-observer-displayname ↗