React Docgen TypeScript Webpack Plugin

1.1.0 verified Thu Apr 23 auth: no javascript abandoned

This Webpack plugin is designed to generate documentation generation (docgen) information specifically for TypeScript React components. It integrates with your Webpack configuration to parse component props and JSDoc comments, primarily intended for use with tools like Storybook's `addon-info` (though `addon-info` itself is now deprecated). The current stable version is 1.1.0. However, the project explicitly states it's experimental, a 'hack job,' and 'not suitable for production.' It has not seen updates since 2019, indicating an abandoned release cadence. Its key differentiator was providing TypeScript support for React docgen at a time when this was less common, but due to its unmaintained status and limitations, it's not recommended for new projects.

Common errors

error Docgen information not appearing for my TypeScript React component in Storybook's addon-info. ↓

cause The component is exported as a default export, or the story name does not match the component name.

fix

Ensure your component is a named export (e.g., export const MyComponent) and that your Storybook story's title exactly matches this named export.

error Webpack build error or unexpected behavior when using TypeScript with `module: esnext` and react-docgen-typescript-webpack-plugin. ↓

cause The plugin has known compatibility issues with the TypeScript compiler option `module` set to `esnext`.

fix

Modify your tsconfig.json to use a different module target like commonjs or es2015 if possible, and re-evaluate your build.

Warnings

breaking This plugin is marked as 'Experimental' and 'not suitable for production' by its maintainers. It has not been updated since 2019, indicating it is likely abandoned. Use with caution or consider modern alternatives. ↓

fix For new projects, consider using `@storybook/addon-docs` directly, which has built-in TypeScript support and does not require this plugin. For existing projects, evaluate the risk of using unmaintained software.

gotcha Docgen information cannot be generated for components exported only as `default`. Components must be exported using a named export to be processed correctly. ↓

fix Always use named exports for components you wish to generate docgen for. E.g., `export const MyComponent = ...;` instead of `export default MyComponent;`.

gotcha The plugin may have issues when the TypeScript compiler option `module` is set to `esnext`. ↓

fix If encountering issues, try setting the `module` compiler option in your `tsconfig.json` to a different value like `commonjs` or `es2015` and check if the problem resolves. Consult `react-docgen-typescript` limitations for further context.

gotcha When used with Storybook's `addon-info` (which is now deprecated), the Storybook story name must exactly match the component's name for docgen information to be read. ↓

fix Ensure your `storiesOf` call uses the component's name as the story title (e.g., `storiesOf('...', module).add('ColorButton', ...)`) if you are still relying on `addon-info`.

Install

npm install react-docgen-typescript-webpack-plugin

yarn add react-docgen-typescript-webpack-plugin

pnpm add react-docgen-typescript-webpack-plugin

Imports

TSDocgenPlugin

wrong

const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin').TSDocgenPlugin;

correct

import TSDocgenPlugin from 'react-docgen-typescript-webpack-plugin';

The plugin is exported as a default export, so `require` syntax should directly assign the module result.

Quickstart

This Webpack configuration snippet demonstrates how to integrate `react-docgen-typescript-webpack-plugin` into a Storybook setup, adding a TypeScript rule with `ts-loader` and instantiating the plugin to generate docgen information.

const path = require('path');
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');

// Assuming a Storybook context, this generates the default Webpack config
// This path might need adjustment based on your Storybook version
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig);

  config.module.rules.push({
    test: /\.tsx?$/,
    include: path.resolve(__dirname, '../src'), // Adjust to your components directory
    loader: require.resolve('ts-loader'),
  });

  config.plugins.push(new TSDocgenPlugin());

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};