Skip to content

Conversation

@unional
Copy link
Contributor

@unional unional commented Nov 28, 2025

Fix type cannot be named error for

defineMain() and meta.story()

Closes #32898

What I did

Re-export missing types

Checklist for Contributors

Testing

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

Not in automated tests, Couldn't find a way to generate the build result (not the pseudo dist in the monorepo) to test against.

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

Manual testing

The one for defineMain is pretty easy to validate.
The global types I cannot fully vet it as it depends on the final build tool.
But it should work. I tested it directly in the resulting dist/index.d.ts.

The issue can be repro (and tested manually in):
https://github.com/cyberuni/sb-composite

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>

Summary by CodeRabbit

  • New Features
    • Expanded TypeScript type exports across Storybook addons and framework integrations, enabling developers to import additional configuration and global types directly from their respective packages for improved type safety and IDE support.

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

This address the "type cannot be named" error for `defineMain()`.
Fix `meta.story()` type cannot be named error
@nx-cloud
Copy link

nx-cloud bot commented Nov 28, 2025

View your CI Pipeline Execution ↗ for commit d3704dd

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

☁️ Nx Cloud last updated this comment at 2025-12-02 08:20:05 UTC

@unional
Copy link
Contributor Author

unional commented Nov 28, 2025

@mrginglymus
Copy link
Contributor

Also fixes #30579 :)

Comment on lines 3 to +7
export function defineMain(config: StorybookConfig) {
return config;
}

export type { StorybookConfig };
Copy link
Member

Choose a reason for hiding this comment

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

If we explicitly stated the return type, would the type export still be needed? @kasperpeulen

@ndelangen ndelangen changed the title CSF Next: type cannot be named errors CSF: Export type to prevent type cannot be named-errors Dec 2, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 2, 2025

📝 Walkthrough

Walkthrough

This change expands the public type surface across addon and framework modules by adding new *Globals type exports and StorybookConfig type exports. All changes are type-only re-exports with no modifications to runtime behavior or control flow.

Changes

Cohort / File(s) Change Summary
A11y addon types
code/addons/a11y/src/index.ts
Added A11yGlobals to exported type re-exports alongside existing A11yTypes
Core addon types
code/core/src/backgrounds/preview.ts,
code/core/src/viewport/preview.ts
Added BackgroundsGlobals and ViewportGlobals to exported type re-exports alongside existing type exports
Framework node index types
code/frameworks/*/src/node/index.ts
Added StorybookConfig type export to 13 framework modules: angular, ember, html-vite, nextjs, preact-vite, react-native-web-vite, react-vite, react-webpack5, server-webpack5, svelte-vite, sveltekit, vue3-vite, web-components-vite

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Highly homogeneous changes: identical pattern applied across 16 files (adding single type re-exports)
  • No logic density, no behavioral changes, no complex interdependencies
  • Simple verification: confirm types exist in source modules and re-export statements follow TypeScript conventions
✨ 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 f6604f0 and eff8e92.

📒 Files selected for processing (16)
  • code/addons/a11y/src/index.ts (1 hunks)
  • code/core/src/backgrounds/preview.ts (2 hunks)
  • code/core/src/viewport/preview.ts (1 hunks)
  • code/frameworks/angular/src/node/index.ts (1 hunks)
  • code/frameworks/ember/src/node/index.ts (1 hunks)
  • code/frameworks/html-vite/src/node/index.ts (1 hunks)
  • code/frameworks/nextjs/src/node/index.ts (1 hunks)
  • code/frameworks/preact-vite/src/node/index.ts (1 hunks)
  • code/frameworks/react-native-web-vite/src/node/index.ts (1 hunks)
  • code/frameworks/react-vite/src/node/index.ts (1 hunks)
  • code/frameworks/react-webpack5/src/node/index.ts (1 hunks)
  • code/frameworks/server-webpack5/src/node/index.ts (1 hunks)
  • code/frameworks/svelte-vite/src/node/index.ts (1 hunks)
  • code/frameworks/sveltekit/src/node/index.ts (1 hunks)
  • code/frameworks/vue3-vite/src/node/index.ts (1 hunks)
  • code/frameworks/web-components-vite/src/node/index.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,jsx,json,html,ts,tsx,mjs}

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

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

  • code/core/src/backgrounds/preview.ts
  • code/frameworks/react-webpack5/src/node/index.ts
  • code/frameworks/react-vite/src/node/index.ts
  • code/frameworks/react-native-web-vite/src/node/index.ts
  • code/core/src/viewport/preview.ts
  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/preact-vite/src/node/index.ts
  • code/frameworks/html-vite/src/node/index.ts
  • code/frameworks/angular/src/node/index.ts
  • code/frameworks/svelte-vite/src/node/index.ts
  • code/frameworks/ember/src/node/index.ts
  • code/addons/a11y/src/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.ts
  • code/frameworks/vue3-vite/src/node/index.ts
**/*.{ts,tsx}

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

Enable TypeScript strict mode

Files:

  • code/core/src/backgrounds/preview.ts
  • code/frameworks/react-webpack5/src/node/index.ts
  • code/frameworks/react-vite/src/node/index.ts
  • code/frameworks/react-native-web-vite/src/node/index.ts
  • code/core/src/viewport/preview.ts
  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/preact-vite/src/node/index.ts
  • code/frameworks/html-vite/src/node/index.ts
  • code/frameworks/angular/src/node/index.ts
  • code/frameworks/svelte-vite/src/node/index.ts
  • code/frameworks/ember/src/node/index.ts
  • code/addons/a11y/src/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.ts
  • code/frameworks/vue3-vite/src/node/index.ts
code/**/*.{ts,tsx,js,jsx,mjs}

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

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
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/core/src/backgrounds/preview.ts
  • code/frameworks/react-webpack5/src/node/index.ts
  • code/frameworks/react-vite/src/node/index.ts
  • code/frameworks/react-native-web-vite/src/node/index.ts
  • code/core/src/viewport/preview.ts
  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/preact-vite/src/node/index.ts
  • code/frameworks/html-vite/src/node/index.ts
  • code/frameworks/angular/src/node/index.ts
  • code/frameworks/svelte-vite/src/node/index.ts
  • code/frameworks/ember/src/node/index.ts
  • code/addons/a11y/src/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.ts
  • code/frameworks/vue3-vite/src/node/index.ts
code/**/*.{ts,tsx,js,jsx}

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

Export functions that need to be tested from their modules

Files:

  • code/core/src/backgrounds/preview.ts
  • code/frameworks/react-webpack5/src/node/index.ts
  • code/frameworks/react-vite/src/node/index.ts
  • code/frameworks/react-native-web-vite/src/node/index.ts
  • code/core/src/viewport/preview.ts
  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/preact-vite/src/node/index.ts
  • code/frameworks/html-vite/src/node/index.ts
  • code/frameworks/angular/src/node/index.ts
  • code/frameworks/svelte-vite/src/node/index.ts
  • code/frameworks/ember/src/node/index.ts
  • code/addons/a11y/src/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.ts
  • code/frameworks/vue3-vite/src/node/index.ts
code/**/*.{js,jsx,json,html,ts,tsx,mjs}

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

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

  • code/core/src/backgrounds/preview.ts
  • code/frameworks/react-webpack5/src/node/index.ts
  • code/frameworks/react-vite/src/node/index.ts
  • code/frameworks/react-native-web-vite/src/node/index.ts
  • code/core/src/viewport/preview.ts
  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/preact-vite/src/node/index.ts
  • code/frameworks/html-vite/src/node/index.ts
  • code/frameworks/angular/src/node/index.ts
  • code/frameworks/svelte-vite/src/node/index.ts
  • code/frameworks/ember/src/node/index.ts
  • code/addons/a11y/src/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.ts
  • code/frameworks/vue3-vite/src/node/index.ts
🧠 Learnings (10)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: The useGlobals hook from storybook/manager-api returns a tuple where the third element (storyGlobals) is typed as Globals, not Globals | undefined. This means TypeScript guarantees it's always defined, making the `in` operator safe to use without additional null checks.
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: In viewport tool code, when using the `useGlobals` hook from storybook/manager-api, the third returned value `storyGlobals` is guaranteed by TypeScript to be defined (not undefined/null), making the `in` operator safe to use without additional null checks.
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

  • code/core/src/backgrounds/preview.ts
  • code/core/src/viewport/preview.ts
  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/preact-vite/src/node/index.ts
  • code/frameworks/html-vite/src/node/index.ts
  • code/frameworks/angular/src/node/index.ts
  • code/frameworks/svelte-vite/src/node/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.ts
  • code/frameworks/vue3-vite/src/node/index.ts
📚 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/frameworks/react-webpack5/src/node/index.ts
  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.ts
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx} : Export functions that need to be tested from their modules

Applied to files:

  • code/frameworks/react-vite/src/node/index.ts
  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/angular/src/node/index.ts
  • code/frameworks/ember/src/node/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
📚 Learning: 2025-09-18T20:51:06.618Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: In viewport tool code, when using the `useGlobals` hook from storybook/manager-api, the third returned value `storyGlobals` is guaranteed by TypeScript to be defined (not undefined/null), making the `in` operator safe to use without additional null checks.

Applied to files:

  • code/core/src/viewport/preview.ts
📚 Learning: 2025-09-18T20:51:06.618Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: The useGlobals hook from storybook/manager-api returns a tuple where the third element (storyGlobals) is typed as Globals, not Globals | undefined. This means TypeScript guarantees it's always defined, making the `in` operator safe to use without additional null checks.

Applied to files:

  • code/core/src/viewport/preview.ts
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : Use server-side logger from 'storybook/internal/node-logger' for Node.js code

Applied to files:

  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/svelte-vite/src/node/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/nextjs/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.ts
📚 Learning: 2025-11-28T14:50:24.872Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.872Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : Use client-side logger from 'storybook/internal/client-logger' for browser code

Applied to files:

  • code/frameworks/sveltekit/src/node/index.ts
  • code/frameworks/server-webpack5/src/node/index.ts
  • code/frameworks/web-components-vite/src/node/index.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/frameworks/sveltekit/src/node/index.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/frameworks/web-components-vite/src/node/index.ts
🧬 Code graph analysis (1)
code/core/src/viewport/preview.ts (1)
code/addons/a11y/src/index.ts (1)
  • PARAM_KEY (6-6)
⏰ 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). (2)
  • GitHub Check: normal
  • GitHub Check: nx
🔇 Additional comments (14)
code/frameworks/sveltekit/src/node/index.ts (1)

6-7: LGTM: Type export addresses TypeScript portability issue.

The type-only re-export of StorybookConfig enables consumers to reference the type without triggering TS2742/TS4023 errors when using defineMain. This aligns with the PR objective to fix "type cannot be named" issues for CSF Next APIs.

code/frameworks/web-components-vite/src/node/index.ts (1)

6-7: LGTM: Consistent type export pattern.

The type re-export follows the same pattern as other frameworks in this PR and resolves TypeScript portability errors for defineMain.

code/frameworks/vue3-vite/src/node/index.ts (1)

6-7: LGTM: Type export aligns with PR pattern.

code/frameworks/nextjs/src/node/index.ts (1)

6-7: LGTM: Type export aligns with PR pattern.

code/frameworks/react-native-web-vite/src/node/index.ts (1)

6-7: LGTM: Type export aligns with PR pattern.

code/core/src/backgrounds/preview.ts (2)

5-10: LGTM: Import addition supports type export.

Adding BackgroundsGlobals to the import enables the subsequent type re-export, consistent with the viewport addon pattern.


29-29: LGTM: Globals type export addresses portability.

Re-exporting BackgroundsGlobals makes the globals shape available to consumers and resolves TypeScript portability issues when using background-related globals in CSF Next stories.

code/frameworks/react-webpack5/src/node/index.ts (1)

6-7: LGTM: Type export aligns with PR pattern.

code/frameworks/ember/src/node/index.ts (1)

6-7: LGTM: Type export aligns with PR pattern.

code/frameworks/svelte-vite/src/node/index.ts (1)

6-7: LGTM! Type export fixes TypeScript portability errors.

The addition of export type { StorybookConfig } directly addresses the "type cannot be named" errors (ts(2742), ts(4023)) reported in issue #32898. By making StorybookConfig part of the public type surface, TypeScript can now correctly name the inferred return type of defineMain in generated .d.ts files, which is essential for composite projects and NodeNext module resolution.

This pattern is consistently applied across all framework modules in this PR.

code/frameworks/angular/src/node/index.ts (1)

3-7: LGTM! Type export addresses portability errors.

The explicit export type { StorybookConfig } makes the type part of the public API surface, which is necessary for TypeScript to correctly name inferred types in generated declaration files. While explicitly annotating the return type of defineMain (as noted in the past review comment) could be an alternative approach, the current solution is more explicit about the public API contract and is more resilient to future refactoring.

code/addons/a11y/src/index.ts (1)

8-8: LGTM! Expanded type exports for A11y addon.

Adding A11yGlobals to the public type exports allows consumers to reference this type without encountering TypeScript portability errors. This aligns with the broader PR pattern of making previously internal types part of the public API surface.

code/core/src/viewport/preview.ts (2)

4-4: LGTM! Added ViewportGlobals to imports.


10-10: LGTM! Expanded type exports for viewport.

Adding ViewportGlobals to the public type exports ensures consumers can reference this type without TypeScript portability issues. This follows the consistent pattern throughout the PR of making necessary types part of the public API surface.


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

@ndelangen ndelangen merged commit 3898e36 into storybookjs:next Dec 2, 2025
58 of 59 checks passed
@github-actions github-actions bot mentioned this pull request Dec 2, 2025
18 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: [SB10] CSF Next type portability issue with react-vite?

5 participants