Skip to content

ReactDocgen: Try using the latest version of the original #33487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ndelangen merged 1 commit into from
Jan 8, 2026
Merged

ReactDocgen: Try using the latest version of the original #33487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions code/lib/cli-storybook/src/sandbox-templates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,6 +428,9 @@ export const baseTemplates = {
features: {
experimentalTestSyntax: true,
},
typescript: {
reactDocgen: 'react-docgen-typescript',
} as any, // the generic type does not contain the reactDocgen property
},
},
skipTasks: ['e2e-tests', 'bench', 'vitest-integration'],
Expand Down
2 changes: 1 addition & 1 deletion code/presets/create-react-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@
],
"dependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
"@types/semver": "^7.7.1",
"pnp-webpack-plugin": "^1.7.0",
"react-docgen-typescript-plugin": "^1.0.8",
"semver": "^7.7.3"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion code/presets/create-react-app/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Options } from 'storybook/internal/types';

import type { PluginOptions as RDTSPluginOptions } from '@storybook/react-docgen-typescript-plugin';
import type { PluginOptions as RDTSPluginOptions } from 'react-docgen-typescript-plugin';

export interface PluginOptions extends Options {
/**
Expand Down
2 changes: 1 addition & 1 deletion code/presets/react-webpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@
],
"dependencies": {
"@storybook/core-webpack": "workspace:*",
"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
"@types/semver": "^7.7.1",
"magic-string": "^0.30.5",
"react-docgen": "^7.1.1",
"react-docgen-typescript-plugin": "^1.0.8",
"resolve": "^1.22.8",
"semver": "^7.7.3",
"tsconfig-paths": "^4.2.0",
Expand Down
2 changes: 1 addition & 1 deletion code/presets/react-webpack/src/framework-preset-react-docs.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { describe, expect, it, vi } from 'vitest';

import type { TypescriptOptions } from '@storybook/core-webpack';
import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';

import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';
import type { Configuration } from 'webpack';

import * as preset from './framework-preset-react-docs';
Expand Down
2 changes: 1 addition & 1 deletion code/presets/react-webpack/src/framework-preset-react-docs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
};
}

const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin');
const { ReactDocgenTypeScriptPlugin } = await import('react-docgen-typescript-plugin');
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🌐 Web query:

react-docgen-typescript-plugin npm package version 1.0.8 API ReactDocgenTypeScriptPlugin

💡 Result:

ReactDocgenTypeScriptPlugin (v1.0.8) — API summary

Constructor

  • new ReactDocgenTypescriptPlugin(options?: {
    tsconfigPath?: string | null;
    compilerOptions?: object | null; // cannot be used together with tsconfigPath
    docgenCollectionName?: string | null; // default: "STORYBOOK_REACT_CLASSES" (set null to disable)
    setDisplayName?: boolean; // default: true
    typePropName?: string; // default: "type"
    exclude?: string[]; // glob[] default: []
    include?: string[]; // glob[] default: ['/.tsx']
    // plus any parser options supported by react-docgen-typescript
    })

Usage notes

  • Require as: const ReactDocgenTypescriptPlugin = require('react-docgen-typescript-plugin').default.
  • You may pass either tsconfigPath or compilerOptions to control TypeScript; do not supply both.
  • The plugin collects docgen info into the global named by docgenCollectionName by default; set to null to disable.
  • Debug logging via DEBUG=docgen:* (include/exclude/docs sub-flags) for troubleshooting.

Sources: npm package readme and package docs. [1][2]

References
[1] react-docgen-typescript-plugin (npm) — README / options.
[2] react-docgen-typescript-plugin (npm.io) — Usage & options.

🏁 Script executed:

# First, let's look at the actual code context to understand how the plugin is used
cat -n code/presets/react-webpack/src/framework-preset-react-docs.ts | sed -n '40,75p'

Repository: storybookjs/storybook

Length of output: 1184

🏁 Script executed:

# Check if there's a package.json in the repo that might show the version being used
fd -e package.json code/presets/react-webpack | head -5

Repository: storybookjs/storybook

Length of output: 474

🏁 Script executed:

# Look for the package.json in the preset directory
cat code/presets/react-webpack/package.json | grep -A 20 "dependencies\|devDependencies"

Repository: storybookjs/storybook

Length of output: 855

🌐 Web query:

react-docgen-typescript-plugin default export import named export

💡 Result:

Short answer: react-docgen-typescript (and the Storybook/Styleguidist integrations that use it) only reliably supports named exports. If you only use default exports the parser will not pick up component prop types — either add a named export for the component or use the parser helper getDefaultExportForFile in a custom componentNameResolver. [1][2]

How to fix (brief):

  • Export named component (recommended):
    • export const MyComponent = (...) => { ... }
    • export default MyComponent
  • Or use getDefaultExportForFile in componentNameResolver when resolving styled/default exports.

Sources:

  • react-docgen-typescript README (note: “Warning: only named exports are supported” and getDefaultExportForFile example). [1]
  • npm / docs pages repeating same guidance and example usage. [2]

🌐 Web query:

react-docgen-typescript-plugin savePropValueAsString option

💡 Result:

The savePropValueAsString option (boolean) tells react-docgen-typescript to store prop defaultValue as a string instead of its raw AST/value. Enable it in the parser or plugin options:

  • react-docgen-typescript parse / withDefaultConfig / withCustomConfig:
    const options = { savePropValueAsString: true };
    const docs = docgen.withDefaultConfig(options).parse('./MyComponent.tsx'). [1]

  • react-docgen-typescript-plugin: pass the same option to the plugin constructor (it forwards parser options). e.g. new ReactDocgenTypescriptPlugin({ savePropValueAsString: true }). [2]

Effect: defaultValue for e.g. counter: 123 becomes defaultValue: '123' (and booleans become 'false', etc.). [1][2]

Sources:
[1] react-docgen-typescript README.
[2] react-docgen-typescript-plugin npm / README.

Fix import syntax to use default export.

The react-docgen-typescript-plugin v1.0.8 exports ReactDocgenTypeScriptPlugin as a default export, not a named export. Change line 43 from:

const { ReactDocgenTypeScriptPlugin } = await import('react-docgen-typescript-plugin');

to:

const ReactDocgenTypeScriptPlugin = (await import('react-docgen-typescript-plugin')).default;

The savePropValueAsString option is valid and correctly specified.

🤖 Prompt for AI Agents 
In @code/presets/react-webpack/src/framework-preset-react-docs.ts at line 43,
The import of ReactDocgenTypeScriptPlugin is using named-import syntax but the
package exports a default; update the dynamic import so
ReactDocgenTypeScriptPlugin is assigned from the module's default export (i.e.,
set ReactDocgenTypeScriptPlugin = (await import(...)).default) in the place
where ReactDocgenTypeScriptPlugin is currently declared to fix the import error
while leaving the savePropValueAsString option unchanged.


return {
...config,
Expand Down
3 changes: 2 additions & 1 deletion code/presets/react-webpack/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import type {
TypescriptOptions as TypescriptOptionsBase,
WebpackConfiguration as WebpackConfigurationBase,
} from '@storybook/core-webpack';
import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin';

import type { PluginOptions as ReactDocgenTypescriptOptions } from 'react-docgen-typescript-plugin';
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if the package exists and find its type definitions

if [ -d "node_modules/react-docgen-typescript-plugin" ]; then
  echo "=== Package found ==="
  
  # Check package.json for types field
  echo "=== package.json types field ==="
  cat node_modules/react-docgen-typescript-plugin/package.json | jq -r '.types // .main // "No types field"'
  
  # Try to find type definition files
  echo "=== Looking for type definitions ==="
  find node_modules/react-docgen-typescript-plugin -name "*.d.ts" -type f | head -20
  
  # Check main entry point
  echo "=== Main file ==="
  cat node_modules/react-docgen-typescript-plugin/package.json | jq -r '.main'
else
  echo "Package not found in node_modules"
fi

Repository: storybookjs/storybook

Length of output: 98

🏁 Script executed:

#!/bin/bash
# If the package is found, examine its exports more closely

if [ -f "node_modules/react-docgen-typescript-plugin/index.d.ts" ]; then
  echo "=== Checking index.d.ts for PluginOptions ==="
  cat node_modules/react-docgen-typescript-plugin/index.d.ts | grep -A 10 -B 2 "PluginOptions" | head -50
elif [ -f "node_modules/react-docgen-typescript-plugin/lib/index.d.ts" ]; then
  echo "=== Checking lib/index.d.ts for PluginOptions ==="
  cat node_modules/react-docgen-typescript-plugin/lib/index.d.ts | grep -A 10 -B 2 "PluginOptions" | head -50
else
  echo "=== Looking for any PluginOptions definition ==="
  rg "PluginOptions" node_modules/react-docgen-typescript-plugin --type ts -A 5 | head -80
fi

Repository: storybookjs/storybook

Length of output: 214

🏁 Script executed:

#!/bin/bash
# Also check how the import is used in the actual file

echo "=== Full content of code/presets/react-webpack/src/types.ts ==="
if [ -f "code/presets/react-webpack/src/types.ts" ]; then
  cat -n code/presets/react-webpack/src/types.ts
else
  echo "File not found"
fi

Repository: storybookjs/storybook

Length of output: 1915

🏁 Script executed:

#!/bin/bash
# Check package.json files for react-docgen-typescript-plugin dependency

echo "=== Checking root package.json ==="
if [ -f "package.json" ]; then
  cat package.json | jq '.dependencies | select(. != null) | keys[] | select(contains("react-docgen"))' 2>/dev/null || echo "Not found in dependencies"
  cat package.json | jq '.devDependencies | select(. != null) | keys[] | select(contains("react-docgen"))' 2>/dev/null || echo "Not found in devDependencies"
fi

echo -e "\n=== Checking workspace package.json files ==="
find . -name "package.json" -type f -path "*/presets/react*" | xargs grep -l "react-docgen-typescript-plugin" 2>/dev/null | head -10

Repository: storybookjs/storybook

Length of output: 188

🏁 Script executed:

#!/bin/bash
# Search for all references to react-docgen-typescript-plugin in the codebase

echo "=== References to react-docgen-typescript-plugin in source code ==="
rg "react-docgen-typescript-plugin" --type ts --type tsx --type js --type json -A 2 -B 2 | head -100

Repository: storybookjs/storybook

Length of output: 177

🏁 Script executed:

#!/bin/bash
# Check if the package exists on npm (via web search in code/types/npm info)
# Also check tsconfig.json for skipLibCheck settings that might affect this

echo "=== Looking for tsconfig.json in the project ==="
find code/presets/react-webpack -name "tsconfig.json" -o -name "tsconfig*.json" | xargs cat 2>/dev/null

Repository: storybookjs/storybook

Length of output: 204

🏁 Script executed:

#!/bin/bash
# Check the react-webpack preset package.json

echo "=== code/presets/react-webpack/package.json ==="
cat code/presets/react-webpack/package.json

Repository: storybookjs/storybook

Length of output: 2010

🏁 Script executed:

#!/bin/bash
# Search for react-docgen-typescript-plugin with better file type handling

echo "=== All references to react-docgen-typescript-plugin ==="
rg "react-docgen-typescript-plugin" --type-list | head -5
rg "react-docgen-typescript-plugin" -A 2 -B 2 | head -150

Repository: storybookjs/storybook

Length of output: 10706

🏁 Script executed:

#!/bin/bash
# Check if there's a types package or declaration file

echo "=== Looking for type declaration files ==="
find . -name "*.d.ts" -type f -exec grep -l "react-docgen-typescript-plugin" {} \;

echo -e "\n=== Checking all src files in react-webpack preset ==="
ls -la code/presets/react-webpack/src/

Repository: storybookjs/storybook

Length of output: 817

🌐 Web query:

react-docgen-typescript-plugin version 1.0.8 PluginOptions export

💡 Result:

Short answer: react-docgen-typescript-plugin@1.0.8 does not publish a named TypeScript type called PluginOptions — the package exposes a default class (ReactDocgenTypescriptPlugin) that accepts an options object (documented in the README), but no exported PluginOptions type is present in the published package. [1][2]

Sources:

  • npm package README / usage for v1.0.8 (shows default export and options usage). [1]
  • package contents (package.json for v1.0.8 on UNPKG). [2]

🏁 Script executed:

#!/bin/bash
# Check how the package is imported and used in the test file

echo "=== framework-preset-react-docs.test.ts ==="
cat code/presets/react-webpack/src/framework-preset-react-docs.test.ts

Repository: storybookjs/storybook

Length of output: 4409

🏁 Script executed:

#!/bin/bash
# Check how the package is used in create-react-app preset to verify consistency

echo "=== create-react-app types.ts for comparison ==="
cat code/presets/create-react-app/src/types.ts | head -40

Repository: storybookjs/storybook

Length of output: 900

Remove the incorrect type import — PluginOptions is not exported from react-docgen-typescript-plugin v1.0.8.

The import statement at line 7 references a type that does not exist in the upstream package. You must define a local type or infer the correct options interface from the plugin's documentation. The package exports a default class (ReactDocgenTypescriptPlugin) but no named PluginOptions type.


export type { BuilderResult } from '@storybook/core-webpack';

Expand Down
71 changes: 19 additions & 52 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8264,10 +8264,10 @@ __metadata:
resolution: "@storybook/preset-create-react-app@workspace:code/presets/create-react-app"
dependencies:
"@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.1"
"@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0"
"@types/node": "npm:^22.19.1"
"@types/semver": "npm:^7.7.1"
pnp-webpack-plugin: "npm:^1.7.0"
react-docgen-typescript-plugin: "npm:^1.0.8"
semver: "npm:^7.7.3"
typescript: "npm:^5.9.3"
peerDependencies:
Expand All @@ -8281,12 +8281,12 @@ __metadata:
resolution: "@storybook/preset-react-webpack@workspace:code/presets/react-webpack"
dependencies:
"@storybook/core-webpack": "workspace:*"
"@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0"
"@types/node": "npm:^22.19.1"
"@types/semver": "npm:^7.7.1"
empathic: "npm:^2.0.0"
magic-string: "npm:^0.30.5"
react-docgen: "npm:^7.1.1"
react-docgen-typescript-plugin: "npm:^1.0.8"
resolve: "npm:^1.22.8"
semver: "npm:^7.7.3"
tsconfig-paths: "npm:^4.2.0"
Expand Down Expand Up @@ -8318,24 +8318,6 @@ __metadata:
languageName: unknown
linkType: soft

"@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0":
version: 1.0.6--canary.9.0c3f3b7.0
resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.6--canary.9.0c3f3b7.0"
dependencies:
debug: "npm:^4.1.1"
endent: "npm:^2.0.1"
find-cache-dir: "npm:^3.3.1"
flat-cache: "npm:^3.0.4"
micromatch: "npm:^4.0.2"
react-docgen-typescript: "npm:^2.2.2"
tslib: "npm:^2.0.0"
peerDependencies:
typescript: ">= 4.x"
webpack: ">= 4"
checksum: 10c0/505a728f36df3f519f4985bdf18f2078ea18a1a8f7f837fc831f971363fb7643a182f01a6857a9729ac5a1246d370526fca5a19017f82e7493af4ca945cb7235
languageName: node
linkType: hard

"@storybook/react-dom-shim@workspace:*, @storybook/react-dom-shim@workspace:code/lib/react-dom-shim":
version: 0.0.0-use.local
resolution: "@storybook/react-dom-shim@workspace:code/lib/react-dom-shim"
Expand Down Expand Up @@ -14655,13 +14637,6 @@ __metadata:
languageName: node
linkType: hard

"dedent@npm:^0.7.0":
version: 0.7.0
resolution: "dedent@npm:0.7.0"
checksum: 10c0/7c3aa00ddfe3e5fcd477958e156156a5137e3bb6ff1493ca05edff4decf29a90a057974cc77e75951f8eb801c1816cb45aea1f52d628cdd000b82b36ab839d1b
languageName: node
linkType: hard

"deep-diff@npm:^1.0.2":
version: 1.0.2
resolution: "deep-diff@npm:1.0.2"
Expand Down Expand Up @@ -15560,17 +15535,6 @@ __metadata:
languageName: node
linkType: hard

"endent@npm:^2.0.1":
version: 2.1.0
resolution: "endent@npm:2.1.0"
dependencies:
dedent: "npm:^0.7.0"
fast-json-parse: "npm:^1.0.3"
objectorarray: "npm:^1.0.5"
checksum: 10c0/8cd6dae45e693ae2b2cbff2384348d3a5e2a06cc0396dddca8165e46bd2fd8d5394d44d338ba653bbfce4aead90eca1ec1abe7203843c84155c645d283b6b884
languageName: node
linkType: hard

"enhanced-resolve@npm:^5.17.1, enhanced-resolve@npm:^5.17.3, enhanced-resolve@npm:^5.7.0":
version: 5.18.3
resolution: "enhanced-resolve@npm:5.18.3"
Expand Down Expand Up @@ -17131,13 +17095,6 @@ __metadata:
languageName: node
linkType: hard

"fast-json-parse@npm:^1.0.3":
version: 1.0.3
resolution: "fast-json-parse@npm:1.0.3"
checksum: 10c0/2c58c7a0f7f1725c9da1272839f9bee3ccc13b77672b18ab4ac470c707999bca39828cd7e79b87c73017f21c3ddff37992d03fa2fd2da124d9bd06c1d02c9b7e
languageName: node
linkType: hard

"fast-json-patch@npm:^3.0.0-1":
version: 3.1.1
resolution: "fast-json-patch@npm:3.1.1"
Expand Down Expand Up @@ -23513,13 +23470,6 @@ __metadata:
languageName: node
linkType: hard

"objectorarray@npm:^1.0.5":
version: 1.0.5
resolution: "objectorarray@npm:1.0.5"
checksum: 10c0/3d3db66e2052df85617ac31b98f8e51a7a883ebce24123018dacf286712aa513a0a84e82b4a6bef68889d5fc39cf08e630ee78df013023fc5161e1fdf3eaaa5a
languageName: node
linkType: hard

"obuf@npm:^1.0.0, obuf@npm:^1.1.2":
version: 1.1.2
resolution: "obuf@npm:1.1.2"
Expand Down Expand Up @@ -25811,6 +25761,23 @@ __metadata:
languageName: node
linkType: hard

"react-docgen-typescript-plugin@npm:^1.0.8":
version: 1.0.8
resolution: "react-docgen-typescript-plugin@npm:1.0.8"
dependencies:
debug: "npm:^4.1.1"
find-cache-dir: "npm:^3.3.1"
flat-cache: "npm:^3.0.4"
micromatch: "npm:^4.0.2"
react-docgen-typescript: "npm:^2.2.2"
tslib: "npm:^2.6.2"
peerDependencies:
typescript: ">= 4.x"
webpack: ">= 4"
checksum: 10c0/9abd1e7c71e2ba7fad080ef17fd262c89aa59509c69a5d34f2a8b63f7e33271e49ab82274c79393f704f387eb09247de6f32605439835237dacf4e31de6859a6
languageName: node
linkType: hard

"react-docgen-typescript@npm:^2.2.2":
version: 2.4.0
resolution: "react-docgen-typescript@npm:2.4.0"
Expand Down
Loading