React Docgen Annotation Resolver

2.0.0 verified Sat Apr 25 auth: no javascript

A resolver for react-docgen that enables parsing of exports annotated with @component JSDoc tag as React components. Version 2.0.0 is stable; the package is released on npm as needed. Unlike default react-docgen resolvers that infer components from patterns like displayName or propTypes, this resolver explicitly marks any export with a @component annotation as a component, giving developers control over what gets documented.

Common errors

error TypeError: annotationResolver is not a function ↓

cause Importing as a named export instead of default import.

fix

Use import annotationResolver from 'react-docgen-annotation-resolver';

error Error: You provided an invalid resolver. Resolvers must be functions. ↓

cause Passing undefined or a non-function value as resolver to react-docgen.parse.

fix

Ensure you import and pass the default function: reactDocgen.parse(source, undefined, annotationResolver);

error Module not found: Can't resolve 'react-docgen-annotation-resolver' ↓

cause Package not installed or incorrect import path.

fix

Run npm install react-docgen-annotation-resolver --save-dev

Warnings

breaking v2.0.0 drops support for Node < 10 (was <8 in v1). May break CI pipelines using older Node. ↓

fix Upgrade to Node >=10 or pin to v1.x if needed.

deprecated The default resolver from react-docgen is deprecated in favor of custom resolvers like this one. ↓

fix This is the intended alternative; no fix required.

gotcha The resolver only detects @component annotation on default exports; named exports are ignored. ↓

fix Ensure your component is a default export with a JSDoc block containing @component.

gotcha If the annotated export is not a React component (e.g., a plain object), react-docgen may still parse it but produce incomplete documentation. ↓

fix Only annotate actual React components with @component.

Install

npm install react-docgen-annotation-resolver

yarn add react-docgen-annotation-resolver

pnpm add react-docgen-annotation-resolver

Imports

annotationResolver

wrong

const annotationResolver = require('react-docgen-annotation-resolver');

correct

import annotationResolver from 'react-docgen-annotation-resolver';

ESM-only since v1.0.0; CJS require works only if the package is transpiled, but it's not recommended.

default

wrong

import { annotationResolver } from 'react-docgen-annotation-resolver';

correct

import annotationResolver from 'react-docgen-annotation-resolver';

This package exports a single default function; named destructuring will result in undefined.

TypeScript types

wrong

import { Resolver } from 'react-docgen-annotation-resolver';

correct

import annotationResolver from 'react-docgen-annotation-resolver';

The package does not export TypeScript types. Use @types/react-docgen or declare your own.

Quickstart

Shows how to use the annotation resolver with react-docgen's parse function to extract documentation from a component annotated with @component.

import annotationResolver from 'react-docgen-annotation-resolver';
import reactDocgen from 'react-docgen';

const sourceCode = `
/** @component */
export default function MyButton() { return <button />; }
`;

const doc = reactDocgen.parse(sourceCode, undefined, annotationResolver);
console.log(doc); // [{ description: '', ... }]