{"id":11693,"library":"react-docgen-typescript-plugin","title":"React Docgen TypeScript Webpack Plugin","description":"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.","status":"active","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/hipstersmoothie/react-docgen-typescript-plugin","tags":["javascript","react","docgen","typescript","webpack","plugin"],"install":[{"cmd":"npm install react-docgen-typescript-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add react-docgen-typescript-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-docgen-typescript-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for parsing TypeScript files and extracting docgen information.","package":"typescript","optional":false},{"reason":"Core dependency as it is a webpack plugin.","package":"webpack","optional":false}],"imports":[{"note":"The default export from the package is the plugin class itself. While `require().default` works in CommonJS, the preferred way for modern Node.js and TypeScript projects is `import`.","wrong":"const ReactDocgenTypescriptPlugin = require('react-docgen-typescript-plugin');","symbol":"ReactDocgenTypescriptPlugin","correct":"import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';"},{"note":"Options are passed as an object to the constructor. Property names should be camelCase as specified in the options table.","wrong":"new ReactDocgenTypescriptPlugin({ 'tsconfigPath': './tsconfig.dev.json' });","symbol":"ReactDocgenTypescriptPlugin with options","correct":"import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';\n\nnew ReactDocgenTypescriptPlugin({ tsconfigPath: './tsconfig.dev.json' });"},{"note":"The README uses `require('typescript')`, but for ESM-first projects or modern TypeScript, `import ts from 'typescript'` is more appropriate. Ensure `typescript` is installed.","wrong":"const ts = require('typescript');","symbol":"TypeScript compiler API","correct":"import ts from 'typescript';\n\nnew ReactDocgenTypescriptPlugin({ compilerOptions: { jsx: ts.JsxEmit.Preserve } });"}],"quickstart":{"code":"import path from 'path';\nimport webpack from 'webpack';\nimport ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';\nimport ts from 'typescript';\n\nconst config: webpack.Configuration = {\n  mode: 'development',\n  entry: './src/index.tsx',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '.js', '.jsx'],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(ts|tsx)$/,\n        loader: 'ts-loader',\n        exclude: /node_modules/,\n      },\n    ],\n  },\n  plugins: [\n    // Initializes the plugin with default options, loading the root tsconfig.json\n    new ReactDocgenTypescriptPlugin(),\n    // Alternatively, specify a custom tsconfig path\n    // new ReactDocgenTypescriptPlugin({ tsconfigPath: './tsconfig.build.json' }),\n    // Or pass specific TypeScript compiler options directly\n    // new ReactDocgenTypescriptPlugin({ compilerOptions: { jsx: ts.JsxEmit.Preserve } }),\n  ],\n};\n\nexport default config;\n","lang":"typescript","description":"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`."},"warnings":[{"fix":"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.","message":"Version 1.0.0 introduced breaking changes by adding support for Webpack 5. Projects migrating from older versions of webpack might need to upgrade the plugin.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"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.","message":"TypeScript compiler options `allowSyntheticDefaultImports` and `esModuleInterop` can significantly impact the plugin's performance, making it harder and slower to process documentation.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"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';`.","message":"The `ReactDocgenTypescriptPlugin` is a default export, which can lead to incorrect `require` or `import` syntax depending on your module system configuration.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"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' })`.","message":"The `docgenCollectionName` option defaults to `STORYBOOK_REACT_CLASSES`. If you're not using Storybook or need a different global object, ensure to configure this option or set it to `null` to disable collection.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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.","cause":"Incorrect import of the plugin when using CommonJS `require` or when `esModuleInterop` is false.","error":"TypeError: (0, _reactDocgenTypescriptPlugin.default) is not a constructor or TypeError: ReactDocgenTypescriptPlugin is not a constructor"},{"fix":"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`).","cause":"The peer dependencies `typescript` or `webpack` are not installed or are not accessible.","error":"Error: Cannot find module 'typescript' or Cannot find module 'webpack'"},{"fix":"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`.","cause":"When providing `compilerOptions` directly, the `ts` object from the TypeScript compiler API needs to be imported or available in scope.","error":"Webpack compilation failed: TS2304: Cannot find name 'ts' in compilerOptions"},{"fix":"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`.","cause":"The plugin might be excluding your component files, or `allowSyntheticDefaultImports`/`esModuleInterop` might be interfering.","error":"Docgen information missing or incorrect for components"}],"ecosystem":"npm"}