{"id":17890,"library":"react-docgen-typescript-webpack-plugin","title":"React Docgen TypeScript Webpack Plugin","description":"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.","status":"abandoned","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/strothj/react-docgen-typescript-webpack-plugin","tags":["javascript","storybook","react","docgen","typescript","webpack","plugin"],"install":[{"cmd":"npm install react-docgen-typescript-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add react-docgen-typescript-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-docgen-typescript-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The plugin is exported as a default export, so `require` syntax should directly assign the module result.","wrong":"const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin').TSDocgenPlugin;","symbol":"TSDocgenPlugin","correct":"import TSDocgenPlugin from 'react-docgen-typescript-webpack-plugin';"}],"quickstart":{"code":"const path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');\n\n// Assuming a Storybook context, this generates the default Webpack config\n// This path might need adjustment based on your Storybook version\nconst genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');\n\nmodule.exports = (baseConfig, env) => {\n  const config = genDefaultConfig(baseConfig);\n\n  config.module.rules.push({\n    test: /\\.tsx?$/,\n    include: path.resolve(__dirname, '../src'), // Adjust to your components directory\n    loader: require.resolve('ts-loader'),\n  });\n\n  config.plugins.push(new TSDocgenPlugin());\n\n  config.resolve.extensions.push('.ts', '.tsx');\n\n  return config;\n};\n","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always use named exports for components you wish to generate docgen for. E.g., `export const MyComponent = ...;` instead of `export default MyComponent;`.","message":"Docgen information cannot be generated for components exported only as `default`. Components must be exported using a named export to be processed correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The plugin may have issues when the TypeScript compiler option `module` is set to `esnext`.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"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.","cause":"The component is exported as a default export, or the story name does not match the component name.","error":"Docgen information not appearing for my TypeScript React component in Storybook's addon-info."},{"fix":"Modify your `tsconfig.json` to use a different `module` target like `commonjs` or `es2015` if possible, and re-evaluate your build.","cause":"The plugin has known compatibility issues with the TypeScript compiler option `module` set to `esnext`.","error":"Webpack build error or unexpected behavior when using TypeScript with `module: esnext` and react-docgen-typescript-webpack-plugin."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}