Registry / devops / react-docgen-typescript-webpack-plugin

react-docgen-typescript-webpack-plugin

library1.1.0jsnpmunverified

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.

devops web-framework

npm install react-docgen-typescript-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-DOCGEN-TYPES

react-docgen-typescript-webpack-plugin

devopsjavascriptv1.1.0

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.

TSDocgenPlugin

✓ import TSDocgenPlugin from 'react-docgen-typescript-webpack-plugin';

✗ const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin').TSDocgenPlugin;

The plugin is exported as a default export, so `require` syntax should directly assign the module result.

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.

const path = require('path'); const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin'); // Assuming a Storybook context, this generates the default Webpack config // This path might need adjustment based on your Storybook version const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js'); module.exports = (baseConfig, env) => { const config = genDefaultConfig(baseConfig); config.module.rules.push({ test: /\.tsx?$/, include: path.resolve(__dirname, '../src'), // Adjust to your components directory loader: require.resolve('ts-loader'), }); config.plugins.push(new TSDocgenPlugin()); config.resolve.extensions.push('.ts', '.tsx'); return config; };

Debug

Known issues

breakingThis 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.

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.

affects: >=1.0.0

gotchaDocgen information cannot be generated for components exported only as `default`. Components must be exported using a named export to be processed correctly.

fix

Always use named exports for components you wish to generate docgen for. E.g., `export const MyComponent = ...;` instead of `export default MyComponent;`.

affects: >=1.0.0

gotchaThe plugin may have issues when the TypeScript compiler option `module` is set to `esnext`.

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.

affects: >=1.0.0

gotchaWhen 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.

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`.

affects: >=1.0.0

Errors

Common errors & fixes

Docgen information not appearing for my TypeScript React component in Storybook's addon-info.

The component is exported as a default export, or the story name does not match the component name.

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.

Webpack build error or unexpected behavior when using TypeScript with `module: esnext` and react-docgen-typescript-webpack-plugin.

The plugin has known compatibility issues with the TypeScript compiler option `module` set to `esnext`.

fix

Modify your `tsconfig.json` to use a different `module` target like `commonjs` or `es2015` if possible, and re-evaluate your build.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/strothj/react-docgen-typescript-webpack-plugin ↗

packagehttps://www.npmjs.com/package/react-docgen-typescript-webpack-plugin ↗