Skip to content

Maintenance: Extract shared ReactDocgenResolveError and RESOLVE_EXTENSIONS to internal/common#34356

Closed
mixelburg wants to merge 1 commit into
storybookjs:nextfrom
mixelburg:refactor/extract-shared-docgen-resolver
Closed

Maintenance: Extract shared ReactDocgenResolveError and RESOLVE_EXTENSIONS to internal/common#34356
mixelburg wants to merge 1 commit into
storybookjs:nextfrom
mixelburg:refactor/extract-shared-docgen-resolver

Conversation

@mixelburg
Copy link
Copy Markdown

@mixelburg mixelburg commented Mar 26, 2026

Summary

Closes #34332

The ReactDocgenResolveError class and defaultLookupModule function were copy-pasted identically between react-vite and react-webpack, with explicit watch out: when updating this code, also update the code in ... comments to keep them in sync manually. This is a known maintenance hazard — a bug fix applied to one would silently miss the other.

Changes

  • New: code/core/src/common/utils/docgen-resolver.ts — single source of truth for ReactDocgenResolveError, RESOLVE_EXTENSIONS, and defaultLookupModule (exported via storybook/internal/common)
  • react-vite/docgen-resolver.ts — replaced 75-line copy with 5-line re-export
  • react-webpack/docgen-resolver.ts — replaced 75-line copy with 5-line re-export
  • react/reactDocgen/docgenResolver.ts — re-exports ReactDocgenResolveError from common instead of defining it locally; keeps its own defaultLookupModule since it uses supportedExtensions (a different ordering tuned for the renderer)

Behaviour

No runtime changes. The react-vite and react-webpack extension resolution ordering is preserved in the shared module (same RESOLVE_EXTENSIONS array). The renderer's defaultLookupModule still uses supportedExtensions as before.

Summary by CodeRabbit

  • Refactor
    • Consolidated React Docgen module resolution utilities into a centralized shared package, removing duplicate implementations across multiple frameworks and presets for improved maintainability.

…XTENSIONS to internal/common

ReactDocgenResolveError and the docgen lookup logic were copy-pasted
identically between react-vite and react-webpack, with a warning comment
instructing developers to manually keep both files in sync.

Extract both to code/core/src/common/utils/docgen-resolver.ts and export
them via storybook/internal/common so both build tools import from one
place. The react renderer's docgenResolver.ts is updated to re-export
ReactDocgenResolveError from common (removing local duplication of the
class) while keeping its own defaultLookupModule that uses the broader
supportedExtensions list.

Closes storybookjs#34332
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 26, 2026

📝 Walkthrough

Walkthrough

This PR centralizes React Docgen resolver utilities—ReactDocgenResolveError class, RESOLVE_EXTENSIONS array, and defaultLookupModule function—into a new shared module (code/core/src/common/utils/docgen-resolver.ts) and removes duplicate implementations from multiple framework-specific files by re-exporting from the centralized location.

Changes

Cohort / File(s) Summary
Central Implementation
code/core/src/common/utils/docgen-resolver.ts, code/core/src/common/index.ts
New docgen-resolver.ts module exports ReactDocgenResolveError class, RESOLVE_EXTENSIONS array with prioritized JS/TS variants, and defaultLookupModule() function with fallback resolution logic from JS/JSX to TS/TSX. Public re-export added to common package index.
Framework Consolidations
code/frameworks/react-vite/src/plugins/docgen-resolver.ts, code/presets/react-webpack/src/loaders/docgen-resolver.ts, code/renderers/react/src/componentManifest/reactDocgen/docgenResolver.ts
Removed local implementations of resolver utilities and replaced with re-exports from storybook/internal/common, eliminating duplicate module resolution logic and error class definitions across multiple framework files.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • storybookjs/storybook#32751: Directly related PR that centralizes React DocGen resolver utilities to a shared module and removes duplicate implementations.
  • storybookjs/storybook#32905: Related PR that modifies module-resolution utilities and public exports in code/core/src/common, including extension lists and resolve logic used by docgen resolution.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/core/src/common/utils/docgen-resolver.ts`:
- Around line 21-34: RESOLVE_EXTENSIONS contains duplicate entries for '.mts'
and '.cts'; clean this array in docgen-resolver.ts by removing the repeated
entries so each extension appears only once (update the RESOLVE_EXTENSIONS
constant to a unique list, preserving intended ordering and keeping symbols like
'.js', '.ts', '.tsx', '.jsx', '.mjs', '.cjs', '.cts', '.mts', '.ctsx', '.mtsx'
only once).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b1394169-63d8-4f2e-9d41-ed045b4b2b8e

📥 Commits

Reviewing files that changed from the base of the PR and between 810093c and 7a1b756.

📒 Files selected for processing (5)
  • code/core/src/common/index.ts
  • code/core/src/common/utils/docgen-resolver.ts
  • code/frameworks/react-vite/src/plugins/docgen-resolver.ts
  • code/presets/react-webpack/src/loaders/docgen-resolver.ts
  • code/renderers/react/src/componentManifest/reactDocgen/docgenResolver.ts

Comment on lines +21 to +34
export const RESOLVE_EXTENSIONS = [
'.js',
'.cts', // These were originally not in the code, I added them
'.mts', // These were originally not in the code, I added them
'.ctsx', // These were originally not in the code, I added them
'.mtsx', // These were originally not in the code, I added them
'.ts',
'.tsx',
'.mjs',
'.cjs',
'.mts',
'.cts',
'.jsx',
];
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Duplicate extensions in RESOLVE_EXTENSIONS.

.mts and .cts appear twice in the array: once at lines 23-24 (newly added) and again at lines 31-32 (from the original code). This redundancy doesn't break resolution but indicates a merge oversight and adds unnecessary iteration.

🔧 Proposed fix to remove duplicates
 export const RESOLVE_EXTENSIONS = [
   '.js',
-  '.cts', // These were originally not in the code, I added them
-  '.mts', // These were originally not in the code, I added them
   '.ctsx', // These were originally not in the code, I added them
   '.mtsx', // These were originally not in the code, I added them
   '.ts',
   '.tsx',
   '.mjs',
   '.cjs',
-  '.mts',
-  '.cts',
+  '.mts', // These were originally not in the code, I added them
+  '.cts', // These were originally not in the code, I added them
   '.jsx',
 ];
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const RESOLVE_EXTENSIONS = [
'.js',
'.cts', // These were originally not in the code, I added them
'.mts', // These were originally not in the code, I added them
'.ctsx', // These were originally not in the code, I added them
'.mtsx', // These were originally not in the code, I added them
'.ts',
'.tsx',
'.mjs',
'.cjs',
'.mts',
'.cts',
'.jsx',
];
export const RESOLVE_EXTENSIONS = [
'.js',
'.ctsx', // These were originally not in the code, I added them
'.mtsx', // These were originally not in the code, I added them
'.ts',
'.tsx',
'.mjs',
'.cjs',
'.mts', // These were originally not in the code, I added them
'.cts', // These were originally not in the code, I added them
'.jsx',
];
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@code/core/src/common/utils/docgen-resolver.ts` around lines 21 - 34,
RESOLVE_EXTENSIONS contains duplicate entries for '.mts' and '.cts'; clean this
array in docgen-resolver.ts by removing the repeated entries so each extension
appears only once (update the RESOLVE_EXTENSIONS constant to a unique list,
preserving intended ordering and keeping symbols like '.js', '.ts', '.tsx',
'.jsx', '.mjs', '.cjs', '.cts', '.mts', '.ctsx', '.mtsx' only once).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mixelburg ☝️

@valentinpalkovic valentinpalkovic self-assigned this Mar 30, 2026
@valentinpalkovic valentinpalkovic added maintenance User-facing maintenance tasks ci:normal labels Mar 30, 2026
@valentinpalkovic valentinpalkovic moved this to In Progress in Core Team Projects Mar 30, 2026
@valentinpalkovic valentinpalkovic changed the title refactor(react): extract shared ReactDocgenResolveError and RESOLVE_EXTENSIONS to internal/common Maintenance: extract shared ReactDocgenResolveError and RESOLVE_EXTENSIONS to internal/common Mar 30, 2026
@valentinpalkovic valentinpalkovic changed the title Maintenance: extract shared ReactDocgenResolveError and RESOLVE_EXTENSIONS to internal/common Maintenance: Extract shared ReactDocgenResolveError and RESOLVE_EXTENSIONS to internal/common Mar 30, 2026
@valentinpalkovic
Copy link
Copy Markdown
Contributor

Hi @mixelburg,

Thank you for your contribution. Please fix the merge conflicts. Thank you! :)

@valentinpalkovic valentinpalkovic moved this from In Progress to On Hold in Core Team Projects Mar 30, 2026
@valentinpalkovic
Copy link
Copy Markdown
Contributor

Closing. See reason here: #34453 (comment)

@github-project-automation github-project-automation Bot moved this from On Hold to Done in Core Team Projects Apr 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:normal maintenance User-facing maintenance tasks

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Duplicate Code: Triplicated docgen-resolver modules across React packages

2 participants