CSF-Factories: Export WebComponentsTypes and VueTypes by kasperpeulen · Pull Request #33521 · storybookjs/storybook

kasperpeulen · 2026-01-13T09:11:50Z

Closes #

What I did

Export WebComponentsTypes from @storybook/web-components and VueTypes from @storybook/vue3.

When using CSF factories with meta.story(), the return type references these type constraints, but they were not exported from the package's public API, causing TS4023 errors:

TS4023: Exported variable 'Default' has or is using name 'WebComponentsTypes'

This follows the existing pattern from @storybook/react which already exports ReactTypes (added in #30601).

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

This is a TypeScript types-only change. To test:

Use the canary release in a project using @storybook/web-components or @storybook/vue3 with CSF factories
Verify that meta.story() no longer produces TS4023 errors about unexported types

Documentation

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

No documentation changes needed - this is a bugfix for missing type exports.

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 pull request has been released as version 0.0.0-pr-33521-sha-610a6294. Try it out in a new sandbox by running npx storybook@0.0.0-pr-33521-sha-610a6294 sandbox or in an existing project with npx storybook@0.0.0-pr-33521-sha-610a6294 upgrade.

More information


Published version	`0.0.0-pr-33521-sha-610a6294`
Triggered by	@kasperpeulen
Repository	storybookjs/storybook
Branch	`kasper/fix-ts4023-types-export`
Commit	`610a6294`
Datetime	Tue Jan 13 10:11:23 UTC 2026 (`1768299083`)
Workflow run	20952819137

To request a new release of this pull request, mention the @storybookjs/core team.

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

When using CSF factories with `meta.story()`, the return type references `WebComponentsTypes` and `VueTypes` constraints, but these types were not exported from the package's public API, causing TS4023 errors: "Exported variable 'Default' has or is using name 'WebComponentsTypes'" This follows the existing pattern from @storybook/react which already exports `ReactTypes`. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>

coderabbitai · 2026-01-13T09:14:48Z

📝 Walkthrough

Walkthrough

Two renderer package index files now publicly re-export their respective types. Vue3 renderer exports VueTypes from its types module, and web-components renderer exports WebComponentsTypes. Both are type-only exports that expand the public API surface without affecting runtime behavior.

Changes

Cohort / File(s)	Summary
Vue3 renderer types export `code/renderers/vue3/src/index.ts`	Added type-only re-export of `VueTypes` from `./types` module to public API.
Web Components renderer types export `code/renderers/web-components/src/index.ts`	Added type-only re-export of `WebComponentsTypes` from `./types` module to public API.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 60bdc9e and 610a629.

📒 Files selected for processing (2)

code/renderers/vue3/src/index.ts
code/renderers/web-components/src/index.ts

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{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/renderers/web-components/src/index.ts
code/renderers/vue3/src/index.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/renderers/web-components/src/index.ts
code/renderers/vue3/src/index.ts

**/*.{ts,tsx}

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

Enable TypeScript strict mode across all packages

Files:

code/renderers/web-components/src/index.ts
code/renderers/vue3/src/index.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/renderers/web-components/src/index.ts
code/renderers/vue3/src/index.ts

🧠 Learnings (4)

📓 Common learnings

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,js,jsx} : Export functions from modules if they need to be tested

📚 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,js,jsx} : Export functions from modules if they need to be tested

Applied to files:

code/renderers/web-components/src/index.ts
code/renderers/vue3/src/index.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 code/{renderers}/**/*.{ts,tsx,js,jsx} : Use `logger` from `storybook/internal/client-logger` for client-side logging in browser code

Applied to files:

code/renderers/web-components/src/index.ts

📚 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/renderers/web-components/src/index.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 (2)

code/renderers/vue3/src/index.ts (1)

8-9: LGTM! Type export correctly exposes VueTypes in the public API.

The export type { VueTypes } from './types'; syntax properly re-exports the interface with no runtime impact, resolving the TS4023 error for cases where VueTypes is referenced in type annotations.

code/renderers/web-components/src/index.ts (1)

12-13: LGTM! Consistent type export pattern.

This correctly exposes WebComponentsTypes in the public API, consistent with the Vue3 change and the existing ReactTypes pattern from @storybook/react. The placement after the barrel exports is appropriate.

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

nx-cloud · 2026-01-13T09:16:56Z

View your CI Pipeline Execution ↗ for commit 610a629

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

☁️ Nx Cloud last updated this comment at 2026-01-13 14:51:22 UTC

storybook-app-bot · 2026-01-13T14:53:52Z

Package Benchmarks

^{Commit: 610a629, ran on 13 January 2026 at 14:53:48 UTC}

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

`storybook`

	Before	After	Difference
Dependency count	49	49	0
Self size	20.30 MB	20.27 MB	🎉 -26 KB 🎉
Dependency size	16.52 MB	16.52 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	183	183	0
Self size	775 KB	775 KB	0 B
Dependency size	67.38 MB	67.35 MB	🎉 -26 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	176	176	0
Self size	30 KB	30 KB	0 B
Dependency size	65.95 MB	65.92 MB	🎉 -26 KB 🎉
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	50	50	0
Self size	999 KB	999 KB	🎉 -42 B 🎉
Dependency size	36.82 MB	36.79 MB	🎉 -26 KB 🎉
Bundle Size Analyzer	node	node

kasperpeulen assigned yannbf Jan 13, 2026

kasperpeulen added the bug label Jan 13, 2026

kasperpeulen added the ci:normal label Jan 13, 2026

kasperpeulen changed the title ~~Fix TS4023: Export WebComponentsTypes and VueTypes~~ CSFFactories: Export WebComponentsTypes and VueTypes Jan 13, 2026

kasperpeulen changed the title ~~CSFFactories: Export WebComponentsTypes and VueTypes~~ CSF-Factories: Export WebComponentsTypes and VueTypes Jan 13, 2026

kasperpeulen added the upgrade:10.2 Issues/PRs found during 10.2 upgrade QA label Jan 13, 2026

yannbf approved these changes Jan 15, 2026

View reviewed changes

kasperpeulen merged commit 4b41597 into next Jan 15, 2026
85 of 91 checks passed

kasperpeulen deleted the kasper/fix-ts4023-types-export branch January 15, 2026 13:37

This was referenced Jan 15, 2026

Release: Prerelease 10.2.0-alpha.19 #33551

Closed

Release: Prerelease 10.2.0-beta.1 #33552

Merged

coderabbitai Bot mentioned this pull request Feb 6, 2026

Nextjs-Vite: Export interface declaration for NextPreview #33785

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CSF-Factories: Export WebComponentsTypes and VueTypes#33521

CSF-Factories: Export WebComponentsTypes and VueTypes#33521
kasperpeulen merged 1 commit into
nextfrom
kasper/fix-ts4023-types-export

kasperpeulen commented Jan 13, 2026 •

edited by storybook-bot

Loading

Uh oh!

coderabbitai Bot commented Jan 13, 2026

Walkthrough

Changes

Estimated code review effort

Uh oh!

nx-cloud Bot commented Jan 13, 2026 •

edited

Loading

Uh oh!

storybook-app-bot Bot commented Jan 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

kasperpeulen commented Jan 13, 2026 • edited by storybook-bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Uh oh!

coderabbitai Bot commented Jan 13, 2026

Walkthrough

Changes

Estimated code review effort

Uh oh!

nx-cloud Bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

storybook-app-bot Bot commented Jan 13, 2026

Package Benchmarks

storybook

@storybook/cli

@storybook/codemod

create-storybook

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kasperpeulen commented Jan 13, 2026 •

edited by storybook-bot

Loading

nx-cloud Bot commented Jan 13, 2026 •

edited

Loading

`storybook`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`