Registry / web-framework / react-docgen-typescript-loader

react-docgen-typescript-loader

JSON →
library3.7.2jsnpmunverified

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.

web-frameworktesting
npm install react-docgen-typescript-loader
github ↗package ↗
INSTALL
IMPORT
SIG · REACT-DOCGEN-TYPES
R
react-docgen-typescript-loader
web-frameworkjavascriptv3.7.2
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.

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
✓ loader: require.resolve('react-docgen-typescript-loader')
✗ import { loader } from '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.

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; };
Debug
Known issues
breakingVersion 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.
affects: >=3.0.0
gotchaThis 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.
affects: all
gotchaRequires 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.
affects: <2.3
Errors
Common errors & fixes
Webpack compilation failed: Module build failed (from ./node_modules/react-docgen-typescript-loader/dist/index.js): Error: Unknown option 'includes' (or 'excludes').
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.
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.
Upgrade
Version history
3.7.2latest on npm
Audit
Dependencies
typescriptrequiredPeer dependency required for parsing and analyzing TypeScript files.
Agent activity
2 hits · last 30 days
node
2
Resources
githubhttps://github.com/strothj/react-docgen-typescript-loader ↗
packagehttps://www.npmjs.com/package/react-docgen-typescript-loader ↗
react-docgen-typescript-loader — npm install react-docgen-typescript-loader · libregistry