Skip to content

Conversation

@icopp
Copy link
Contributor

@icopp icopp commented Oct 31, 2025

Relates to #32898

What I did

This interface has to be exported to prevent has or is using name '...' from external module "..." but cannot be named errors when attempting to use definePreview(...).meta(...).

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

  1. Create a simple preview.tsx for a Storybook project, for example:
    import { definePreview } from "@storybook/nextjs";
    
    export default definePreview({});
    
    (Note that CSF: Fix export interface declaration for NextPreview #32914 is necessary to avoid a type error at this point.)
  2. Create a simple whatever.stories.tsx, for example:
    import preview from "@/.storybook/preview";
    
    const meta = preview.meta({
      component: () => null,
      title: "Some Component"
    });
    
  3. See that there is a type error before this change, and (if CSF: Fix export interface declaration for NextPreview #32914 is also included) no type error after this change

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

This interface has to be exported to prevent `has or is using name '...' from external module "..." but cannot be named` errors when attempting to use `definePreview(...).meta(...)`.
@yannbf yannbf requested a review from kasperpeulen November 3, 2025 14:26
@yannbf yannbf changed the title fix: export interface declaration for ReactMeta Fix: Export interface declaration for ReactMeta Nov 3, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 3, 2025

📝 Walkthrough

Walkthrough

The ReactMeta interface in the React renderer preview module is now exported as a public type, making it accessible to external consumers. No functional changes to the interface implementation or structure.

Changes

Cohort / File(s) Summary
React Meta Export
code/renderers/react/src/preview.tsx
Export visibility added to ReactMeta interface declaration; type signature remains unchanged

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

✨ Finishing touches
  • 📝 Generate docstrings

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5d0ff07 and 80e50d1.

📒 Files selected for processing (1)
  • code/renderers/react/src/preview.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}

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

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

  • code/renderers/react/src/preview.tsx
**/*.{ts,tsx,js,jsx,mjs}

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

Export functions from modules when they need to be unit-tested

Files:

  • code/renderers/react/src/preview.tsx
code/**/*.{ts,tsx,js,jsx,mjs}

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

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

  • code/renderers/react/src/preview.tsx
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

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

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/renderers/react/src/preview.tsx
⏰ 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). (3)
  • GitHub Check: Danger JS
  • GitHub Check: Core Unit Tests, windows-latest
  • GitHub Check: normal
🔇 Additional comments (1)
code/renderers/react/src/preview.tsx (1)

87-87: LGTM! Correct fix for TypeScript visibility issue.

Exporting the ReactMeta interface is the proper solution for the "cannot be named" TypeScript error. Since this interface is returned by the public ReactPreview.meta() method (line 72), it must be exported so TypeScript can properly reference it in declaration files. This change also improves consistency with other exported interfaces like ReactPreview and ReactStory.


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.

@nx-cloud
Copy link

nx-cloud bot commented Nov 3, 2025

View your CI Pipeline Execution ↗ for commit 80e50d1

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 47s View ↗

☁️ Nx Cloud last updated this comment at 2025-11-03 14:44:32 UTC

Copy link
Member

@yannbf yannbf left a comment

Choose a reason for hiding this comment

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

Thank you <3

@yannbf yannbf merged commit 4721fee into storybookjs:next Nov 6, 2025
55 of 65 checks passed
@yannbf yannbf added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Nov 6, 2025
@storybook-app-bot
Copy link

Package Benchmarks

Commit: 80e50d1, ran on 6 November 2025 at 15:23:25 UTC

The following packages have significant changes to their size or dependencies:

@storybook/nextjs

Before After Difference
Dependency count 533 533 0
Self size 749 KB 749 KB 🚨 +108 B 🚨
Dependency size 58.93 MB 58.91 MB 🎉 -20 KB 🎉
Bundle Size Analyzer Link Link

@storybook/nextjs-vite

Before After Difference
Dependency count 124 124 0
Self size 3.83 MB 3.83 MB 🎉 -250 B 🎉
Dependency size 21.87 MB 21.85 MB 🎉 -20 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-native-web-vite

Before After Difference
Dependency count 157 157 0
Self size 31 KB 31 KB 0 B
Dependency size 23.11 MB 23.09 MB 🎉 -20 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-vite

Before After Difference
Dependency count 114 114 0
Self size 37 KB 37 KB 0 B
Dependency size 19.67 MB 19.65 MB 🎉 -20 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-webpack5

Before After Difference
Dependency count 273 273 0
Self size 25 KB 25 KB 0 B
Dependency size 43.89 MB 43.87 MB 🎉 -20 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react

Before After Difference
Dependency count 57 57 0
Self size 833 KB 812 KB 🎉 -20 KB 🎉
Dependency size 12.92 MB 12.92 MB 0 B
Bundle Size Analyzer Link Link

yannbf added a commit that referenced this pull request Nov 7, 2025
Fix: Export interface declaration for ReactMeta
(cherry picked from commit 4721fee)
@github-actions github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Nov 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug ci:normal csf factories patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch typescript

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants