{"id":19019,"library":"babel-plugin-add-react-displayname-babel7","title":"babel-plugin-add-react-displayname","description":"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.","status":"maintenance","version":"0.0.6-beta","language":"javascript","source_language":"en","source_url":"https://github.com/paradoxxxzero/babel-plugin-add-react-displayname","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-add-react-displayname-babel7","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-add-react-displayname-babel7","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-add-react-displayname-babel7","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a Babel plugin, not imported in source code. It is configured in .babelrc or babel.config.js as a plugin string.","wrong":"require('babel-plugin-add-react-displayname')","symbol":"default","correct":""},{"note":"Plugin name used in .babelrc plugins array.","wrong":"","symbol":"add-react-displayname","correct":""}],"quickstart":{"code":"// Install the plugin\n// npm install --save-dev babel-plugin-add-react-displayname\n\n// Configure in .babelrc\n{\n  \"plugins\": [\"add-react-displayname\"]\n}\n\n// Example React component that will receive displayName\nfunction MyComponent() {\n  return <div>Hello</div>;\n}\n\n// After Babel transforms, MyComponent.displayName = 'MyComponent'","lang":"javascript","description":"Shows installation and configuration of the plugin along with a simple functional component that automatically gets a displayName."},"warnings":[{"fix":"Ensure 'add-react-displayname' appears before 'transform-decorators-legacy' in the plugins list.","message":"Plugin order matters if using decorators: place this plugin before transform-decorators-legacy","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install @babel/preset-react and add it to your Babel config: { \"presets\": [\"@babel/preset-react\"] }","cause":"Missing Babel preset for JSX (e.g., @babel/preset-react).","error":"SyntaxError: Unexpected token (8:4)\n> 8 |     return <div>Hello</div>;"},{"fix":"Add import React from 'react' or use the new JSX transform (React 17+).","cause":"Component uses JSX without importing React.","error":"ReferenceError: React is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}