Registry /
devops / react-docgen-typescript
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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
parse
✓ import { parse } from 'react-docgen-typescript'
✗ const docgen = require('react-docgen-typescript'); docgen.parse('./path/to/component')
'parse' is the core function for processing a single file. For CommonJS, the common pattern shown in the README is to import the entire module and then access 'parse' from the imported object.
withDefaultConfig
✓ import { withDefaultConfig } from 'react-docgen-typescript'
✗ const docgen = require('react-docgen-typescript'); docgen.withDefaultConfig(options)
Used to create a parser instance with default TypeScript compiler options and custom docgen options.
withCustomConfig
✓ import { withCustomConfig } from 'react-docgen-typescript'
✗ const docgen = require('react-docgen-typescript'); docgen.withCustomConfig('./tsconfig.json', options)
Allows creating a parser using an existing tsconfig.json file for TypeScript configuration, which is recommended for most projects.
ComponentDoc
✓ import type { ComponentDoc } from 'react-docgen-typescript'
This is a TypeScript type definition for the structured output of the parser for a single component. It should be imported as a type.
This example demonstrates how to parse a TypeScript React component using `withCustomConfig` to specify a `tsconfig.json` and custom docgen options, then prints the generated documentation to the console.
import { withCustomConfig } from 'react-docgen-typescript';
import * as fs from 'fs';
import * as path from 'path';
// Define a dummy component file for demonstration
const componentCode = `
import React from 'react';
interface ButtonProps {
/**
* The text content of the button.
*/
label: string;
/**
* Is this the principal call to action on the page?
* @default false
*/
primary?: boolean;
/**
* What background color to use
*/
backgroundColor?: string;
/**
* How large should the button be?
* @default 'medium'
*/
size?: 'small' | 'medium' | 'large';
/**
* Optional click handler
*/
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}
/**
* A primary button component
*/
export const Button: React.FC<ButtonProps> = ({
label,
primary = false,
backgroundColor,
size = 'medium',
onClick,
}) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={{ backgroundColor }}
onClick={onClick}
>
{label}
</button>
);
};
`;
const tempDir = path.join(__dirname, 'temp');
if (!fs.existsSync(tempDir)) {
fs.mkdirSync(tempDir);
}
const tempComponentPath = path.join(tempDir, 'Button.tsx');
fs.writeFileSync(tempComponentPath, componentCode);
// Create a basic tsconfig.json for the parser
const tsconfigPath = path.join(tempDir, 'tsconfig.json');
fs.writeFileSync(tsconfigPath, JSON.stringify({
compilerOptions: {
jsx: "react",
module: "ESNext",
target: "ESNext",
esModuleInterop: true,
strict: true,
skipLibCheck: true,
},
include: [tempDir + "/**/*"]
}, null, 2));
const parser = withCustomConfig(tsconfigPath, {
shouldExtractLiteralValuesFromEnum: true,
propFilter: {
skipPropsWithoutDoc: true,
},
});
try {
const componentDocs = parser.parse(tempComponentPath);
console.log(JSON.stringify(componentDocs, null, 2));
} catch (error) {
console.error("Error parsing component:", error);
} finally {
// Clean up temporary files
fs.unlinkSync(tempComponentPath);
fs.unlinkSync(tsconfigPath);
fs.rmdirSync(tempDir);
}
Errors
Common errors & fixes
TypeError: (tag.text || "").trim is not a function
This error typically occurred in versions prior to 2.0.0 due to an issue with how JSDoc tag text was processed, where the 'text' property could be null or undefined.
fixUpgrade 'react-docgen-typescript' to version 2.0.0 or newer to resolve this bug, which included fixes for tag text handling.
Cannot read property 'length' of undefined
This often indicates an issue in older versions (pre-2.0.0) where internal data structures for declarations or other parsed elements were unexpectedly undefined, leading to runtime errors when trying to access properties like 'length'.
fixUpgrade 'react-docgen-typescript' to version 2.0.0 or newer, as this was addressed in fixes for that major release.
Property 'declarations' of 'PropItem' is undefined or has no 'length' property
In older versions, particularly around 1.20.5, specific scenarios could lead to 'declarations' being undefined, causing runtime errors when attempting to access its 'length' property.
fixEnsure you are using 'react-docgen-typescript' version 1.20.5 or newer, or ideally any 2.x version, where these edge cases were resolved.
trimFileName no longer works in a monorepo
This was a specific bug in versions prior to 2.2.2 where the 'trimFileName' logic failed to correctly process file paths when used within a monorepo setup.
fixUpgrade 'react-docgen-typescript' to version 2.2.2 or higher to fix the 'trimFileName' functionality in monorepos.
Audit
Dependencies
typescriptrequiredRequired peer dependency for parsing TypeScript files.