Webpack Loader for TypeScript React Component Docgen

3.7.2 · active · verified Sun Apr 19

react-docgen-typescript-loader is a Webpack loader designed to extract documentation (docgen) information from TypeScript React components. This information, including component prop types, descriptions, and default values, is primarily utilized to populate dynamic documentation tables, especially within tools like Storybook's Info Addon or Docs Addon. The current stable version is 3.7.2. While there's no fixed release cadence, updates typically align with major changes in React, TypeScript, or Webpack. Its key differentiator is its specific focus on TypeScript components, offering robust type introspection to enrich component documentation automatically, reducing manual documentation effort for developers working in TypeScript-heavy React ecosystems.

Common errors

```
Webpack compilation failed: Module build failed (from ./node_modules/react-docgen-typescript-loader/dist/index.js): Error: Unknown option 'includes' (or 'excludes').
```
cause Attempting to use the `includes` or `excludes` options from v2 of the loader in v3 or later.

fix Remove the `includes` and `excludes` options from the `react-docgen-typescript-loader` configuration within your Webpack setup. Use Webpack's native `test`, `include`, and `exclude` rule properties for file filtering.
```
Storybook prop types table is empty or shows incorrect information for TypeScript components, despite `react-docgen-typescript-loader` being configured.
```
cause The `react-docgen-typescript-loader` is not executed in the correct order in the Webpack rule chain, or it's not targeting the correct files.

fix Verify that `react-docgen-typescript-loader` is placed *after* your TypeScript compiler loader (e.g., `ts-loader`) in the `use` array of your Webpack module rule. Also, confirm the `include` and `test` regex patterns correctly target your TypeScript React component files.

Warnings

breaking Version 3 removed the `includes` and `excludes` options, which were previously used for file filtering. Relying on these options in v3+ will lead to configuration errors.
Fix: Remove `includes` and `excludes` from `react-docgen-typescript-loader` options. Implement file filtering using Webpack's `test`, `include`, and `exclude` properties on the rule itself.
gotcha This loader must be applied *after* `ts-loader` (or `awesome-typescript-loader`) in your Webpack configuration's `use` array. Incorrect order will result in a lack of docgen information or build failures.
Fix: Ensure `react-docgen-typescript-loader` is listed later in the `use` array than your TypeScript compiler loader (e.g., `ts-loader`). Webpack loaders execute right-to-left.
gotcha Requires TypeScript version 2.3 or above for proper functionality, specifically for inserting `// @ts-ignore` comments during source code generation. Older versions may cause unexpected behavior or build errors.
Fix: Upgrade your project's TypeScript dependency to version 2.3 or newer.

Install

npm install react-docgen-typescript-loader npm
yarn add react-docgen-typescript-loader yarn
pnpm add react-docgen-typescript-loader pnpm

Imports

Loader String Identifier
```
loader: 'react-docgen-typescript-loader'
```
Used as a string identifier in Webpack rules. For more robust path resolution in monorepos or complex setups, `require.resolve` is often preferred.
Loader Path Resolution
wrong:
```
import { loader } from 'react-docgen-typescript-loader'
```
correct:
```
loader: require.resolve('react-docgen-typescript-loader')
```
The recommended way to specify the loader path in Webpack configurations, ensuring correct resolution, especially in monorepos or when Webpack's module resolution is customized.

Quickstart

This configuration demonstrates how to integrate `react-docgen-typescript-loader` into a Storybook Webpack setup, ensuring it processes `.tsx` and `.ts` files after `ts-loader` to generate prop type documentation for components.

const path = require("path");

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.tsx?$/,
    include: path.resolve(__dirname, "../src"),
    use: [
      require.resolve("ts-loader"),
      {
        loader: require.resolve("react-docgen-typescript-loader"),
        options: {
          // Optional: specify a tsconfig.json file for better type resolution
          // tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
          // Optional: exclude files from being processed
          // exclude: ['node_modules'],
          // Optional: include files from being processed
          // include: ['src'],
        }
      }
    ]
  });

  // Required for Storybook to resolve .tsx files
  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

view raw JSON →