react-docgen-typescript-plugin is a webpack plugin designed to automatically extract and inject TypeScript-based documentation (docgen information) for React components directly into the webpack build output. This is particularly useful for tools like Storybook that consume docgen information to generate component documentation. The current stable version is `1.0.8`. The package appears to follow a frequent bug-fix release cadence, with minor updates addressing specific issues or dependency bumps, as evidenced by the recent v1.0.x patches. Its key differentiator is its seamless integration into the webpack build process, providing a 'fire-and-forget' solution for generating React component props documentation from TypeScript types, contrasting with loaders that might require more explicit configuration per file. It supports both Webpack 4 and 5 and allows for fine-grained control over `tsconfig.json` paths, compiler options, and file inclusion/exclusion.
npm install react-docgen-typescript-pluginVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to integrate `react-docgen-typescript-plugin` into a basic webpack configuration for a TypeScript React project. It shows how to import the plugin and add it to the webpack `plugins` array, using its default settings which automatically pick up your root `tsconfig.json`.
Ensure you are using `react-docgen-typescript-plugin` v1.0.0 or higher for Webpack 5 projects. For Webpack 4, use `react-docgen-typescript-plugin` < 1.0.0.
For faster build times, it is recommended to turn off `allowSyntheticDefaultImports` and `esModuleInterop` in your `tsconfig.json` when using this plugin, if your project allows.
When using CommonJS `require`, access the plugin via `.default`: `const ReactDocgenTypescriptPlugin = require('react-docgen-typescript-plugin').default;`. For ESM `import`, use `import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';`.Set `docgenCollectionName: null` in the plugin options if you don't need docgen information to be collected into a global variable, or provide a custom string for your desired collection name: `new ReactDocgenTypescriptPlugin({ docgenCollectionName: 'MY_CUSTOM_DOCS' })`.If using `require`, ensure you access the `.default` export: `const ReactDocgenTypescriptPlugin = require('react-docgen-typescript-plugin').default;`. If using `import` in a mixed ESM/CJS environment, ensure your `tsconfig.json` or bundler settings correctly handle default imports.Install the required peer dependencies: `npm install --save-dev typescript webpack` or `yarn add -D typescript webpack`. Ensure their versions meet the plugin's requirements (e.g., `typescript: >= 4.x`, `webpack: >= 4`).
Make sure `import ts from 'typescript';` is present in your webpack configuration file if you're using `ts.JsxEmit.Preserve` or similar enum values directly in `compilerOptions`.
Check the `include` and `exclude` options to ensure your component files are being processed. Set `DEBUG=docgen:*` environment variable to get detailed logs on which modules are included/excluded and which docs are generated. Also, consider disabling `allowSyntheticDefaultImports` and `esModuleInterop` in your `tsconfig.json`.