ReactDocgen: Try using the latest version of the original#33487
Conversation
ndelangen
added
bug
performance issue
typescript
builder-webpack5
dependencies
and removed
bug
performance issue
labels
📝 WalkthroughWalkthroughMigrate from the Storybook-forked Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @code/presets/react-webpack/src/framework-preset-react-docs.ts:
- 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.
🧹 Nitpick comments (1)
code/presets/react-webpack/src/types.ts (1)
36-36: Update the documentation reference to reflect the package change.The comment still references the Storybook repository defaults. Since the package has migrated to the upstream
react-docgen-typescript-plugin, consider updating this reference to point to the upstream package's documentation or defaults, or clarify that these are Storybook's default configuration values when using the upstream plugin.📝 Suggested documentation update
/** * Configures `react-docgen-typescript-plugin` * * @default - * @see https://github.com/storybookjs/storybook/blob/next/code/builders/builder-webpack5/src/config/defaults.js#L4-L6 + * @see https://github.com/hipstersmoothie/react-docgen-typescript-plugin for plugin options + * Storybook defaults: https://github.com/storybookjs/storybook/blob/next/code/builders/builder-webpack5/src/config/defaults.js#L4-L6 */
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (7)
code/lib/cli-storybook/src/sandbox-templates.tscode/presets/create-react-app/package.jsoncode/presets/create-react-app/src/types.tscode/presets/react-webpack/package.jsoncode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/presets/react-webpack/src/framework-preset-react-docs.tscode/presets/react-webpack/src/types.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/package.jsoncode/presets/react-webpack/src/types.tscode/presets/create-react-app/package.jsoncode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/presets/react-webpack/src/framework-preset-react-docs.tscode/presets/create-react-app/src/types.tscode/lib/cli-storybook/src/sandbox-templates.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 commandcross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directivesto fix linting errors before committing
Files:
code/presets/react-webpack/package.jsoncode/presets/react-webpack/src/types.tscode/presets/create-react-app/package.jsoncode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/presets/react-webpack/src/framework-preset-react-docs.tscode/presets/create-react-app/src/types.tscode/lib/cli-storybook/src/sandbox-templates.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Enable TypeScript strict mode across all packages
Files:
code/presets/react-webpack/src/types.tscode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/presets/react-webpack/src/framework-preset-react-docs.tscode/presets/create-react-app/src/types.tscode/lib/cli-storybook/src/sandbox-templates.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 useconsole.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/presets/react-webpack/src/types.tscode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/presets/react-webpack/src/framework-preset-react-docs.tscode/presets/create-react-app/src/types.tscode/lib/cli-storybook/src/sandbox-templates.ts
code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use
loggerfromstorybook/internal/node-loggerfor server-side logging in Node.js code
Files:
code/presets/react-webpack/src/types.tscode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/presets/react-webpack/src/framework-preset-react-docs.tscode/presets/create-react-app/src/types.tscode/lib/cli-storybook/src/sandbox-templates.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.mdcfor 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}: Usevi.mock()with thespy: trueoption for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Usevi.mocked()to type and access the mocked functions in Vitest tests
Implement mock behaviors inbeforeEachblocks 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 withoutvi.mocked()in Vitest tests
Avoid mock implementations outside ofbeforeEachblocks in Vitest tests
Avoid mocking without thespy: trueoption 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 withvi.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
Usevi.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 (19)
📓 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: 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.
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
📚 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/package.jsoncode/presets/react-webpack/src/types.tscode/presets/create-react-app/package.jsoncode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/presets/react-webpack/src/framework-preset-react-docs.tscode/presets/create-react-app/src/types.tscode/lib/cli-storybook/src/sandbox-templates.ts
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/presets/react-webpack/package.jsoncode/presets/create-react-app/package.json
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/presets/react-webpack/package.jsoncode/presets/create-react-app/package.json
📚 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/react-webpack/src/types.tscode/presets/react-webpack/src/framework-preset-react-docs.test.tscode/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: Use Node.js 22.21.1 (see `.nvmrc`) and Yarn 4.9.1 for development
Applied to files:
code/presets/create-react-app/package.json
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.tscode/lib/cli-storybook/src/sandbox-templates.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.tscode/lib/cli-storybook/src/sandbox-templates.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in `beforeEach` blocks in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use `vi.mocked()` to type and access the mocked functions in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of `beforeEach` blocks in Vitest tests
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
📚 Learning: 2025-11-24T17:49:31.838Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T17:49:31.838Z
Learning: Applies to code/vitest.workspace.ts : Vitest configuration is centralized in `code/vitest.workspace.ts` for workspace setup
Applied to files:
code/presets/react-webpack/src/framework-preset-react-docs.test.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 **/*.{ts,tsx} : Enable TypeScript strict mode across all packages
Applied to files:
code/lib/cli-storybook/src/sandbox-templates.ts
📚 Learning: 2025-11-05T09:37:25.920Z
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.
Applied to files:
code/lib/cli-storybook/src/sandbox-templates.ts
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the `spy: true` option in Vitest tests
Applied to files:
code/lib/cli-storybook/src/sandbox-templates.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (5)
code/presets/react-webpack/package.json (1)
45-45: Migration to upstream plugin aligns with PR objectives.The dependency change from the Storybook-forked
@storybook/react-docgen-typescript-pluginto the upstreamreact-docgen-typescript-plugin@^1.0.8is consistent with the broader migration across this PR.code/presets/create-react-app/package.json (1)
39-39: Consistent dependency migration across presets.The dependency change matches the migration in
react-webpack/package.json, maintaining consistency across both presets.code/lib/cli-storybook/src/sandbox-templates.ts (1)
431-433: TypeScript ReactDocgen configuration added appropriately.The addition of
typescript.reactDocgen: 'react-docgen-typescript'enables the upstream plugin for the React Webpack 18 TS template, aligning with the broader plugin migration. Theas anycast is acknowledged with a clear comment explaining the type limitation.code/presets/create-react-app/src/types.ts (1)
3-3: Type import updated to match dependency migration.The type import path change from
@storybook/react-docgen-typescript-plugintoreact-docgen-typescript-plugincorrectly aligns with the package.json dependency update. ThePluginOptionstype is used forreactDocgenTypescriptOptions(line 19), so the upstream plugin must export a compatible interface.code/presets/react-webpack/src/framework-preset-react-docs.test.ts (1)
5-5: Upstream package compatibility verified.The
react-docgen-typescript-pluginpackage (v1.0.8) correctly exports the plugin as a default export, and the import statement matches the expected API. The migration to the upstream package is compatible.
| } | ||
|
|
||
| const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin'); | ||
| const { ReactDocgenTypeScriptPlugin } = await import('react-docgen-typescript-plugin'); |
There was a problem hiding this comment.
🧩 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 -5Repository: 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.
| } 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'; |
There was a problem hiding this comment.
🧩 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"
fiRepository: 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
fiRepository: 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"
fiRepository: 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 -10Repository: 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 -100Repository: 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/nullRepository: 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.jsonRepository: 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 -150Repository: 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.tsRepository: 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 -40Repository: 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.
|
View your CI Pipeline Execution ↗ for commit 1946a68
☁️ Nx Cloud last updated this comment at |
ndelangen
deleted the
revert-33486-revert-33454-norbert/investigate-react-docgen-typescript-plugin
branch
1 participant
See #33454
Summary by CodeRabbit
New Features
Dependencies
✏️ Tip: You can customize this high-level summary in your review settings.