Revert "ReactDocgen: Try using the latest version of the original" by ndelangen · Pull Request #33499 · storybookjs/storybook

ndelangen · 2026-01-09T16:12:53Z

I have found a major regression when react components are exported directly like so:

export default function Header(){};

When users change their code to be like so:

function header(){};
export default Header

Everything functions correctly.

For now, I'll revert the change, and I'll seek a way to improve the upstream package so that it supports this use-case.

Summary by CodeRabbit

Chores
- Updated React Docgen TypeScript plugin integration across Create React App and React Webpack presets to use Storybook's maintained variant, improving long-term dependency management and consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

nx-cloud · 2026-01-09T16:13:49Z

View your CI Pipeline Execution ↗ for commit fc87a01

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	✅ Succeeded	11m 4s	View ↗

☁️ Nx Cloud last updated this comment at 2026-01-09 16:26:27 UTC

coderabbitai · 2026-01-09T16:19:33Z

📝 Walkthrough

Walkthrough

Migrated from the legacy react-docgen-typescript-plugin package to @storybook/react-docgen-typescript-plugin across create-react-app and react-webpack presets, updating dependencies, imports, and type references. Removed the react-docgen-typescript override from the CRA sandbox template configuration.

Changes

Cohort / File(s)	Summary
Sandbox Template Configuration `code/lib/cli-storybook/src/sandbox-templates.ts`	Removed react-docgen-typescript override (typescript.reactDocgen) from cra/default-js template mainConfig
Create React App Preset `code/presets/create-react-app/package.json`, `code/presets/create-react-app/src/types.ts`	Replaced react-docgen-typescript-plugin (^1.0.8) with `@storybook/react-docgen-typescript-plugin` (1.0.6--canary.9.0c3f3b7.0); updated RDTSPluginOptions type import source
React Webpack Preset `code/presets/react-webpack/package.json`, `code/presets/react-webpack/src/framework-preset-react-docs.ts`, `code/presets/react-webpack/src/framework-preset-react-docs.test.ts`, `code/presets/react-webpack/src/types.ts`	Replaced react-docgen-typescript-plugin (^1.0.8) with `@storybook/react-docgen-typescript-plugin` (1.0.6--canary.9.0c3f3b7.0); updated all import paths for plugin and type references

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

ReactDocgen: Try using the latest version of the original #33487: Migrates React DocGen TypeScript integration by switching plugin packages and updating related imports/configurations
ReactDocgen: Try using the latest version of the original #33454: Updates the same React DocGen TypeScript plugin package and CRA sandbox reactDocgen configuration
Build: Fix failing react sandboxes #32549: Modifies mainConfig entries in sandbox-templates.ts alongside experimental configuration flags

✨ Finishing touches

📝 Generate docstrings

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

code/presets/create-react-app/package.json (1)

50-54: Remove gitHead from source-controlled package.json.

The value ends with a non-hex character ('l') and contains 41 characters instead of the required 40. More importantly, gitHead is auto-generated by npm during packaging/publishing to record the git commit SHA—it should not be manually committed to the repository. Remove it and let npm add it automatically during publish.

code/presets/react-webpack/src/types.ts (1)

6-38: Fix broken type import—PluginOptions is not exported from @storybook/react-docgen-typescript-plugin.

The import at line 6 will fail type-checking because @storybook/react-docgen-typescript-plugin does not export PluginOptions. Define the type locally or import from the unscoped react-docgen-typescript-plugin if available.

Also update the JSDoc comment at line 32 to reflect the correct package name being configured, or align terminology with the actual dependency being used.
code/presets/react-webpack/src/framework-preset-react-docs.ts (1)
43-70: Fix import mismatch: the package exports ReactDocgenTypeScriptPlugin as default, not as a named export.

The code attempts named destructuring on line 43, but the test file—which correctly imports this package—uses a default import. This will cause a runtime error: "Cannot destructure property 'ReactDocgenTypeScriptPlugin' of undefined". Handle both export shapes with fallback logic to avoid failures:
Proposed fix
-  const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin');
+  const rdtsMod = await import('@storybook/react-docgen-typescript-plugin');
+  const ReactDocgenTypeScriptPlugin =
+    (rdtsMod as any).ReactDocgenTypeScriptPlugin ??
+    (rdtsMod as any).default;
+
+  if (!ReactDocgenTypeScriptPlugin) {
+    throw new Error(
+      'Failed to load @storybook/react-docgen-typescript-plugin: missing ReactDocgenTypeScriptPlugin export.'
+    );
+  }

🤖 Fix all issues with AI agents

In @code/presets/react-webpack/src/framework-preset-react-docs.test.ts:
- Around line 3-5: The test imports the plugin as a default
(ReactDocgenTypescriptPlugin) but runtime uses the named export
ReactDocgenTypeScriptPlugin; update the test import to use the named import form
(import { ReactDocgenTypeScriptPlugin } ...) so the test mirrors production
import/export semantics and catches ESM/CJS mismatches for the
ReactDocgenTypeScriptPlugin symbol.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 535ca86 and fc87a01.

⛔ Files ignored due to path filters (1)

yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (7)

code/lib/cli-storybook/src/sandbox-templates.ts
code/presets/create-react-app/package.json
code/presets/create-react-app/src/types.ts
code/presets/react-webpack/package.json
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
code/presets/react-webpack/src/framework-preset-react-docs.ts
code/presets/react-webpack/src/types.ts

💤 Files with no reviewable changes (1)

code/lib/cli-storybook/src/sandbox-templates.ts

🧰 Additional context used

📓 Path-based instructions (8)

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

code/presets/react-webpack/src/types.ts
code/presets/create-react-app/src/types.ts
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
code/presets/react-webpack/package.json
code/presets/create-react-app/package.json
code/presets/react-webpack/src/framework-preset-react-docs.ts

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

code/presets/react-webpack/src/types.ts
code/presets/create-react-app/src/types.ts
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
code/presets/react-webpack/package.json
code/presets/create-react-app/package.json
code/presets/react-webpack/src/framework-preset-react-docs.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

code/presets/react-webpack/src/types.ts
code/presets/create-react-app/src/types.ts
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
code/presets/react-webpack/src/framework-preset-react-docs.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

code/presets/react-webpack/src/types.ts
code/presets/create-react-app/src/types.ts
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
code/presets/react-webpack/src/framework-preset-react-docs.ts

code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

code/presets/react-webpack/src/types.ts
code/presets/create-react-app/src/types.ts
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
code/presets/react-webpack/src/framework-preset-react-docs.ts

**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Test files should follow the naming pattern *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Follow the spy mocking rules defined in .cursor/rules/spy-mocking.mdc for consistent mocking patterns with Vitest

Files:

code/presets/react-webpack/src/framework-preset-react-docs.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access the mocked functions in Vitest tests
Implement mock behaviors in beforeEach blocks in Vitest tests
Mock all required dependencies that the test subject uses
Each mock implementation should return a Promise for async functions in Vitest
Mock implementations should match the expected return type of the original function
Mock all required properties and methods that the test subject uses in Vitest tests
Avoid direct function mocking without vi.mocked() in Vitest tests
Avoid mock implementations outside of beforeEach blocks in Vitest tests
Avoid mocking without the spy: true option in Vitest tests
Avoid inline mock implementations within test cases in Vitest tests
Avoid mocking only a subset of required dependencies in Vitest tests
Mock at the highest level of abstraction needed in Vitest tests
Keep mock implementations simple and focused in Vitest tests
Use type-safe mocking with vi.mocked() in Vitest tests
Document complex mock behaviors in Vitest tests
Group related mocks together in Vitest tests

Files:

code/presets/react-webpack/src/framework-preset-react-docs.test.ts

**/*.{test,spec}.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{test,spec}.{ts,tsx,js,jsx}: Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns
Achieve high test coverage of business logic, aiming for 75%+ coverage of statements/lines
Cover all branches, conditions, edge cases, error paths, and different input variations in unit tests
Use vi.mock() to mock file system, loggers, and other external dependencies in tests

Files:

code/presets/react-webpack/src/framework-preset-react-docs.test.ts

🧠 Learnings (18)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to docs/**/migration*.md : Update migration guides for breaking changes

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

📚 Learning: 2025-11-05T09:38:47.712Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

code/presets/react-webpack/src/types.ts
code/presets/create-react-app/src/types.ts
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
code/presets/react-webpack/package.json
code/presets/create-react-app/package.json
code/presets/react-webpack/src/framework-preset-react-docs.ts

📚 Learning: 2025-10-01T15:24:01.060Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

Applied to files:

code/presets/create-react-app/src/types.ts
code/presets/react-webpack/package.json
code/presets/react-webpack/src/framework-preset-react-docs.ts

📚 Learning: 2025-12-22T22:03:40.123Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx} : Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns

Applied to files:

code/presets/react-webpack/src/framework-preset-react-docs.test.ts