{"id":19132,"library":"babel-plugin-react-displayname-path","title":"babel-plugin-react-displayname-path","description":"Babel plugin that automatically sets the `displayName` property for React components by prefixing the component name with its file path relative to the project root. Version 1.1.0 is stable and rarely updated. It supports function components returning JSX and class components. Unlike other displayName plugins, this one includes the file path prefix, making component stack traces more readable in production builds. Must be placed before other plugins in the Babel config to work correctly. No known security issues.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/sergei-startsev/babel-plugin-react-displayname-path","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-react-displayname-path","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-displayname-path","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-displayname-path","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for Babel plugin runtime","package":"@babel/core","optional":false}],"imports":[{"note":"This is a Babel plugin, not a direct import. Register it in Babel config as a string in the plugins array.","wrong":"// Using require() without registering as a plugin:\nconst plugin = require('babel-plugin-react-displayname-path');","symbol":"babel-plugin-react-displayname-path","correct":"// In .babelrc or babel.config.js:\n{\n  \"plugins\": [\"react-displayname-path\"]\n}"},{"note":"Babel plugins are specified by name in config, not imported in source code.","wrong":"// Importing as ES module:\nimport plugin from 'babel-plugin-react-displayname-path';","symbol":"Babel plugin array entry","correct":"// babel.config.js\nmodule.exports = {\n  plugins: ['react-displayname-path']\n};"}],"quickstart":{"code":"// Install: yarn add babel-plugin-react-displayname-path -D\n// babel.config.js\nmodule.exports = {\n  presets: ['@babel/preset-env', '@babel/preset-react'],\n  plugins: ['react-displayname-path']\n};\n\n// After build, component stack traces will show file paths:\n// Example error output:\n//   in src/components/Button\n//   in App\n//   in div\n//   in Unknown","lang":"javascript","description":"Install via yarn, add to Babel config plugins array (before other plugins), then production builds include file paths in component displayName."},"warnings":[{"fix":"Reorder plugins: put 'react-displayname-path' first.","message":"Plugin must be placed before other plugins in the Babel plugins array to work correctly.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure plugin is added to the plugins array and is before any other plugins.","cause":"Plugin placed after other plugins or not included in Babel config.","error":"displayName not added to my component"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}