Registry / devops / babel-plugin-react-docgen

babel-plugin-react-docgen

library4.2.1jsnpmunverified

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.

devops web-framework

npm install babel-plugin-react-docgen

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-docgen

devopsjavascriptv4.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import babelPluginReactDocgen from 'babel-plugin-react-docgen';

✗ const babelPluginReactDocgen = require('babel-plugin-react-docgen');

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.

PluginReferenceString

✓ plugins: ['react-docgen']

✗ plugins: ['babel-plugin-react-docgen']

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.

PluginWithOptions

✓ plugins: [['react-docgen', { resolver: 'findAllExportedComponentDefinition' }]]

✗ plugins: ['react-docgen', { resolver: 'findAllExportedComponentDefinition' }]

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.

Demonstrates the basic installation and configuration of the plugin in `babel.config.js`, along with an example React component showing how `__docgenInfo` is generated.

npm install -D babel-plugin-react-docgen @babel/core @babel/cli // babel.config.js module.exports = { plugins: [ "react-docgen" ], // Ensure Babel processes your React files, e.g., with @babel/preset-react // presets: ['@babel/preset-react', '@babel/preset-env'] }; // src/Button.jsx import React from 'react'; import PropTypes from 'prop-types'; // Use prop-types package /** * This is an example button component for demonstration purposes. */ export default class Button extends React.Component { render() { const { label, onClick } = this.props; return ( <button onClick={onClick}>{ label }</button> ); } } Button.propTypes = { /** * The text label for the button. */ label: PropTypes.string, /** * Function called when the button is clicked. */ onClick: PropTypes.func, }; // To access the generated info after Babel compilation (e.g., in a documentation builder) // console.log(Button.__docgenInfo); /* Expected structure of Button.__docgenInfo: { description: 'This is an example button component for demonstration purposes.', props: { label: { type: { name: 'string' }, required: false, description: 'The text label for the button.' }, onClick: { type: { name: 'func' }, required: false, description: 'Function called when the button is clicked.' } } } */

Debug

Known issues

breakingVersion 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.

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.

affects: >=3.0.0

breakingVersion 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.

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.

affects: >=4.0.0

gotchaWhen 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.

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.

affects: >=1.0.0

gotchaThe 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.

fix

Refactor components to import `PropTypes` from the `prop-types` package and use it (e.g., `import PropTypes from 'prop-types'; MyComponent.propTypes = { ... };`).

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading '__docgenInfo')

The plugin was not applied to the component's file, or Babel did not process the file with the plugin.

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.

ReferenceError: MY_GLOBAL_DOCS is not defined

The `DOC_GEN_COLLECTION_NAME` option was used, but the specified global variable (`MY_GLOBAL_DOCS`) was not initialized before the transformed code ran.

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).

Error: Could not resolve file path for resolver 'myCustomResolver'

A custom resolver was specified by name in the plugin options, but Babel or `react-docgen` could not locate or load the resolver module.

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.

Upgrade

Version history

4.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/storybooks/babel-plugin-react-docgen ↗

packagehttps://www.npmjs.com/package/babel-plugin-react-docgen ↗