{"id":40630,"library":"babel-plugin-react-observer-displayname","title":"babel-plugin-react-observer-displayname","description":"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.","status":"active","version":"0.0.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-react-observer-displayname","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-observer-displayname","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-observer-displayname","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only; no CommonJS export.","wrong":"const plugin = require('babel-plugin-react-observer-displayname')","symbol":"default","correct":"import plugin from 'babel-plugin-react-observer-displayname'"},{"note":"Use package name, not path.","wrong":"plugins: ['./node_modules/babel-plugin-react-observer-displayname']","symbol":"plugin","correct":"plugins: ['babel-plugin-react-observer-displayname']"},{"note":"When using CJS config, string reference is preferred.","wrong":"module.exports = { plugins: [require('babel-plugin-react-observer-displayname')] }","symbol":"Module","correct":"module.exports = { plugins: ['babel-plugin-react-observer-displayname'] }"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\"babel-plugin-react-observer-displayname\"]\n}\n\n// Input\nimport { observer } from 'mobx-react-lite';\nconst MyComponent = observer(props => {\n  return <div>{props.name}</div>;\n});\n\n// Output (development only)\nimport { observer } from 'mobx-react-lite';\nconst MyComponent = observer(props => {\n  return <div>{props.name}</div>;\n});\nif (process.env.NODE_ENV === 'development') {\n  MyComponent.displayName = 'observer(MyComponent)';\n}","lang":"javascript","description":"Shows how to install the plugin and the transformation it performs on observer-wrapped components."},"warnings":[{"fix":"Ensure components are defined as 'const MyComponent = observer(...)' or 'function MyComponent() { ... }' wrapped in observer.","message":"Only works with named function expressions and const declarations with arrow functions assigned to observer calls.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"No fix needed; this is intentional for production bundle size.","message":"DisplayName is only added in development mode (checking process.env.NODE_ENV).","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Wrap displayName plugin after other HoCs or manually set displayName.","message":"If you wrap observer with HoCs (e.g., withRouter(observer(...))), displayName may not be added correctly.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use named exports or const declarations.","message":"Plugin does not handle anonymous functions or default exports.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure this plugin runs after other observer-related plugins.","message":"Plugin may conflict with other Babel plugins that transform observer calls or displayName.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'0.0.2':28 '2022':32 'ad':70 'add':12 'arrow':64 'assign':36 'automat':11,39 'babel':2,8,72 'babel-plugin-react-observer-displaynam':1 'beyond':69 'call':42 'compon':18 'configur':67 'const':61 'declar':62 'detect':40 'develop':48,53 'displaynam':6,13,35,46 'env':52 'express':59 'function':58,65 'inject':44 'javascript':74 'last':29 'lite':26 'manual':34 'mobx':24 'mobx-react-lit':23 'mode':49 'name':57 'observ':5,16,41 'observer-wrap':15 'plugin':3,9,38,73 'primarili':19 'process.env.node':51 'react':4,25 'requir':68 'support':56 'unlik':33 'updat':30 'use':21 'version':27 'via':50 'wrap':17","created_at":"2026-06-04T18:48:30.304085+00:00","updated_at":"2026-06-04T18:48:30.304085+00:00","problems":[{"fix":"Use 'const MyComponent = observer(...)' or 'function MyComponent() { ... }' and import observer from 'mobx-react-lite'.","cause":"Component not defined as a named const/function or observer not from mobx-react-lite.","error":"DisplayName not added for my component"},{"fix":"Check Babel configuration and set NODE_ENV=development.","cause":"Babel config not loaded correctly or process.env.NODE_ENV not set to 'development'.","error":"Plugin doesn't seem to work"},{"fix":"Ensure NODE_ENV is set to 'production' in production builds and that the conditional is not eliminated by other plugins.","cause":"process.env.NODE_ENV check is removed by minifier or not set.","error":"Plugin added displayName in production"},{"fix":"Run 'npm install babel-plugin-react-observer-displayname --save-dev' and ensure it's listed in Babel config.","cause":"Plugin not installed or Babel cannot resolve it.","error":"Plugin throws 'Cannot find module' error"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"babel-plugin-react-observer-displayname","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}