{"id":11692,"library":"react-docgen-typescript-loader","title":"Webpack Loader for TypeScript React Component Docgen","description":"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.","status":"active","version":"3.7.2","language":"javascript","source_language":"en","source_url":"https://github.com/strothj/react-docgen-typescript-loader","tags":["javascript","storybook","react","docgen","typescript","webpack","loader"],"install":[{"cmd":"npm install react-docgen-typescript-loader","lang":"bash","label":"npm"},{"cmd":"yarn add react-docgen-typescript-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-docgen-typescript-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for parsing and analyzing TypeScript files.","package":"typescript","optional":false}],"imports":[{"note":"Used as a string identifier in Webpack rules. For more robust path resolution in monorepos or complex setups, `require.resolve` is often preferred.","symbol":"Loader String Identifier","correct":"loader: 'react-docgen-typescript-loader'"},{"note":"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.","wrong":"import { loader } from 'react-docgen-typescript-loader'","symbol":"Loader Path Resolution","correct":"loader: require.resolve('react-docgen-typescript-loader')"}],"quickstart":{"code":"const path = require(\"path\");\n\nmodule.exports = (baseConfig, env, config) => {\n  config.module.rules.push({\n    test: /\\.tsx?$/,\n    include: path.resolve(__dirname, \"../src\"),\n    use: [\n      require.resolve(\"ts-loader\"),\n      {\n        loader: require.resolve(\"react-docgen-typescript-loader\"),\n        options: {\n          // Optional: specify a tsconfig.json file for better type resolution\n          // tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),\n          // Optional: exclude files from being processed\n          // exclude: ['node_modules'],\n          // Optional: include files from being processed\n          // include: ['src'],\n        }\n      }\n    ]\n  });\n\n  // Required for Storybook to resolve .tsx files\n  config.resolve.extensions.push('.ts', '.tsx');\n\n  return config;\n};","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade your project's TypeScript dependency to version 2.3 or newer.","message":"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.","severity":"gotcha","affected_versions":"<2.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use the `includes` or `excludes` options from v2 of the loader in v3 or later.","error":"Webpack compilation failed: Module build failed (from ./node_modules/react-docgen-typescript-loader/dist/index.js): Error: Unknown option 'includes' (or 'excludes')."},{"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.","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.","error":"Storybook prop types table is empty or shows incorrect information for TypeScript components, despite `react-docgen-typescript-loader` being configured."}],"ecosystem":"npm"}