{"id":14457,"library":"babel-plugin-react-docgen","title":"Babel Plugin for React Docgen","description":"The `babel-plugin-react-docgen` package is a Babel plugin designed to embed documentation metadata, generated by `react-docgen`, directly into React component definitions during the build process. Instead of requiring a separate build step or runtime parsing, this plugin augments your React components with a `__docgenInfo` static property, making propType descriptions, component descriptions, and other metadata programmatically accessible at runtime. This capability is highly beneficial for tools such as Storybook, style guides, or developer tools that consume component metadata. The current stable version is 4.2.1. The project appears to have an infrequent release cadence, with major versions released every few years, often in response to updates in `react-docgen` or the Babel ecosystem itself. Its key differentiator is the seamless integration of docgen output directly into the component's generated code, simplifying access to documentation metadata.","status":"maintenance","version":"4.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/storybooks/babel-plugin-react-docgen","tags":["javascript","react","docs","docgen","babel-plugin"],"install":[{"cmd":"npm install babel-plugin-react-docgen","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-docgen","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-docgen","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While it's possible to import the plugin function directly into `babel.config.js` (an ESM context) for programmatic use, the more common and recommended pattern is to reference the plugin by its string name in the `plugins` array. The package is ESM compatible for direct import in appropriate environments.","wrong":"const babelPluginReactDocgen = require('babel-plugin-react-docgen');","symbol":"default","correct":"import babelPluginReactDocgen from 'babel-plugin-react-docgen';"},{"note":"The most common way to use the plugin is by its short string name 'react-docgen' within the 'plugins' array of your Babel configuration (e.g., .babelrc or babel.config.js). The full package name also works but is less common.","wrong":"plugins: ['babel-plugin-react-docgen']","symbol":"PluginReferenceString","correct":"plugins: ['react-docgen']"},{"note":"When passing options to the plugin, its entry in the Babel 'plugins' array must be an array itself. The first element is the plugin name (string), and the second is the options object.","wrong":"plugins: ['react-docgen', { resolver: 'findAllExportedComponentDefinition' }]","symbol":"PluginWithOptions","correct":"plugins: [['react-docgen', { resolver: 'findAllExportedComponentDefinition' }]]"}],"quickstart":{"code":"npm install -D babel-plugin-react-docgen @babel/core @babel/cli\n\n// babel.config.js\nmodule.exports = {\n  plugins: [\n    \"react-docgen\"\n  ],\n  // Ensure Babel processes your React files, e.g., with @babel/preset-react\n  // presets: ['@babel/preset-react', '@babel/preset-env']\n};\n\n// src/Button.jsx\nimport React from 'react';\nimport PropTypes from 'prop-types'; // Use prop-types package\n\n/**\n * This is an example button component for demonstration purposes.\n */\nexport default class Button extends React.Component {\n  render() {\n    const { label, onClick } = this.props;\n    return (\n      <button onClick={onClick}>{ label }</button>\n    );\n  }\n}\n\nButton.propTypes = {\n  /**\n   * The text label for the button.\n   */\n  label: PropTypes.string,\n  /**\n   * Function called when the button is clicked.\n   */\n  onClick: PropTypes.func,\n};\n\n// To access the generated info after Babel compilation (e.g., in a documentation builder)\n// console.log(Button.__docgenInfo);\n/* Expected structure of Button.__docgenInfo:\n{\n  description: 'This is an example button component for demonstration purposes.',\n  props: {\n    label: {\n      type: { name: 'string' },\n      required: false,\n      description: 'The text label for the button.'\n    },\n    onClick: {\n      type: { name: 'func' },\n      required: false,\n      description: 'Function called when the button is clicked.'\n    }\n  }\n}\n*/","lang":"javascript","description":"Demonstrates the basic installation and configuration of the plugin in `babel.config.js`, along with an example React component showing how `__docgenInfo` is generated."},"warnings":[{"fix":"Upgrade `@babel/core`, `@babel/cli`, and other Babel presets/plugins to their Babel 7 compatible versions. Adjust `.babelrc` or `babel.config.js` syntax as per Babel 7 migration guides.","message":"Version 3.0.0 introduced breaking changes by upgrading to Babel 7 and `react-docgen` v5. This requires updating Babel-related dependencies to their v7+ counterparts and reviewing Babel configuration syntax.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Consult the `react-docgen` v6 changelog for specific API changes related to resolvers and handlers. Update any custom implementations to conform to the new `react-docgen` API.","message":"Version 4.0.0 bumped `react-docgen` to v6.0.0, which included significant changes to resolvers and handlers. Custom resolvers or handlers might require updates.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure the specified global variable is an initialized object in your application's entry point or setup script before any React components are loaded.","message":"When using the `DOC_GEN_COLLECTION_NAME` option to collect all docgen information into a global variable, that global variable must be initialized (e.g., `window.MY_DOCS = {}` or `global.MY_DOCS = {}`) before any code processed by this plugin executes.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refactor components to import `PropTypes` from the `prop-types` package and use it (e.g., `import PropTypes from 'prop-types'; MyComponent.propTypes = { ... };`).","message":"The underlying `react-docgen` library expects `propTypes` to be imported from the `prop-types` package, not `React.PropTypes`. Using `React.PropTypes` (deprecated since React v15.5) may lead to incorrect or incomplete docgen information.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that `babel-plugin-react-docgen` is correctly listed in your `babel.config.js` or `.babelrc` and that the file containing the component is being transpiled by Babel.","cause":"The plugin was not applied to the component's file, or Babel did not process the file with the plugin.","error":"TypeError: Cannot read properties of undefined (reading '__docgenInfo')"},{"fix":"Before any components processed by the plugin are executed, ensure the global variable is initialized as an empty object (e.g., `window.MY_GLOBAL_DOCS = {};` in browsers or `global.MY_GLOBAL_DOCS = {};` in Node.js).","cause":"The `DOC_GEN_COLLECTION_NAME` option was used, but the specified global variable (`MY_GLOBAL_DOCS`) was not initialized before the transformed code ran.","error":"ReferenceError: MY_GLOBAL_DOCS is not defined"},{"fix":"Ensure the path to your custom resolver is correct and that it can be resolved by Node.js's module resolution system. Alternatively, provide the resolver function directly rather than its string name.","cause":"A custom resolver was specified by name in the plugin options, but Babel or `react-docgen` could not locate or load the resolver module.","error":"Error: Could not resolve file path for resolver 'myCustomResolver'"}],"ecosystem":"npm"}