React-DocGen-TypeScript: Setup & Fix Guide

From Section 1: Plugin Architecture Explained The plugin extracts component metadata (props, types, defaults) from your TypeScript files and generates JSON that Storybook consumes to auto-populate control panels. It's not a linter or build tool, it's a parser that runs during your bundler's compilation phase. Here's what happens: 1. Your bundler (Webpack, Vite, esbuild) hits a component file 2. The plugin intercepts the module before bundle generation 3. It parses TypeScript using the TypeScript compiler API 4. Extracts prop type information and JSDoc comments 5. Attaches metadata to the module export 6. Passes the modified code back to your bundler Critical limitation: The plugin only works on files it explicitly processes. If your bundler's loader chain doesn't pass `.tsx`/`.ts` files to the plugin, it silently does nothing. --- From Section 8: 40-Point Debugging Checklist (excerpt) Use this checklist in order. Stop when you find your issue. Most problems appear in steps 1-10. PREREQUISITE CHECKS 1. Is react-docgen-typescript-plugin installed? Run: `npm list @react-docgen-typescript/plugin` 2. Is Storybook installed? Run: `npm run storybook` 3. Are you looking in the right place? Open Storybook, click a component story, then click the "Docs" tab (not Canvas). The plugin populates the Docs tab, not Canvas. 4. Does your component have JSDoc comments? The plugin can't extract metadata from uncommented props.