Export additional types from core-annotations to reduce `cannot be named` errors #33344

icopp · 2025-12-12T05:05:31Z

Relates to #32898

What I did

This is an attempt to fix the remaining Exported variable '...' has or is using name '...' from external module "/..." but cannot be named errors when using definedPreview().meta().story().

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

Using a project with "composite": true

Create a simple preview.tsx for a Storybook project, for example:

import { definePreview } from "@storybook/nextjs";

export default definePreview({
  addons: []
});

Create a simple story, for example:

const meta = preview.meta({
  component: () => null
});
export default meta;

export const SomeStory = meta.story();

See that there are multiple type errors before this change, and fewer type errors after this change

The complex build system and tangled cross-package imports mean I'm not 100% sure that this will fix all type errors, but I don't think it can make anything worse.

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
- Public type definitions now available for Backgrounds, Controls, Highlight, Measure, Outline, Test, Viewport, and Actions features. Provides enhanced TypeScript support for developers integrating the library, improving code quality and developer experience.

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

…med` errors This is an attempt to fix the remaining `Exported variable '...' has or is using name '...' from external module "/..." but cannot be named` errors when using `definedPreview().meta().story()`.

mrginglymus · 2025-12-12T07:57:43Z

Under CSF4 it's not necessary to export meta, so the easiest fix for this is just to not do that :)

Fwiw I remember encountering this before I realised I didn't need to export meta...but now I can't reproduce it, even with fairly strict type checking

icopp · 2025-12-12T17:32:56Z

Under CSF4 it's not necessary to export meta, so the easiest fix for this is just to not do that :)

The error comes from exporting anything with meta.story(...), which is still needed.

Fwiw I remember encountering this before I realised I didn't need to export meta...but now I can't reproduce it, even with fairly strict type checking

Are you using composite: true? From comments on other issues, that seems to be why only some people are seeing the issue. When using that, any other package using composite: true package needs to be able to import all of the same types, including types used in intersections.

mrginglymus · 2025-12-12T18:10:31Z

Ahh, I only have composite: true in my build config...but enabling it still doesn't reveal these errors.

mrginglymus · 2025-12-12T18:34:34Z

This is odd...canot reproduce at all on my repo, but can reproduce on the reproduction repo. It would be ideal if we can get this failing on the sandbox repo too, so that we can catch future regressions.

icopp · 2025-12-12T19:07:16Z

This is odd...canot reproduce at all on my repo, but can reproduce on the reproduction repo. It would be ideal if we can get this failing on the sandbox repo too, so that we can catch future regressions.

If it's any help with that, my company's setup uses a Typescript repo with project references. The root tsconfig.json has (for example)

{
  ...,
  "files": [],
  "references": [
    { "path": "packages/components" },
    { "path": "packages/web" },
    ...
  ]
}

and then the tsconfig.json files in each packages folder have along the lines of:

{
  ...,
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "references": [
    { "path": "../components" }
  ]
}

Type checks are run by just running tsc -b at the root level (which via the references processes the entire monorepo). All references between the packages are via package imports, not direct file references.

mrginglymus · 2025-12-12T20:22:42Z

I've been using this: https://github.com/cyberuni/sb-composite - which is a pretty minimal reproduction. I just can't work out what's the difference between it and mine...

mrginglymus · 2025-12-12T20:32:20Z

The meta.story() ones only explode if you call them with no arguments - replacing them with meta.story({}) and they work fine, which suggests there's something wrong with the typing of the function (rather than an issue with non-exported types).

The export issue in main doesn't reproduce under yarn..

icopp · 2025-12-12T22:05:30Z

The meta.story() ones only explode if you call them with no arguments - replacing them with meta.story({}) and they work fine, which suggests there's something wrong with the typing of the function (rather than an issue with non-exported types).

The export issue in main doesn't reproduce under yarn..

In my company's repo I still get the errors for BackgroundsGlobals and ViewportGlobals when doing meta.story({}), as well as an additional error: Property 'args' is missing in type '{}' but required in type ... (with the big inferred type out of meta.

mrginglymus · 2025-12-12T22:24:21Z

Well that's very doomed :)

Typescript version?

icopp · 2025-12-14T22:38:33Z

Well that's very doomed :)

Typescript version?

5.8.3 (with tsc -b).

An interesting thing here is that from checking again, the errors with meta.story({}) aren't actually showing up for every component. Some stories have no errors, some stories have multiple errors, even with components with similar props.

For a simplified example:

// callout.stories.ts

import { faWandMagicSparkles } from "@fortawesome/pro-regular-svg-icons";

import preview from "#.storybook/preview";

import CalloutComponent from "./callout";

const meta = preview.meta({
  component: CalloutComponent,
  title: "Blocks/Callout",
  argTypes: {
    children: { control: "text" },
    color: {
      type: {
        name: "enum",
        value: ["gray", "red", "green"],
      },
    },
    icon: {
      control: "select",
    },
  },
  args: {
    children: "This is a callout.",
    color: "gray",
    icon: faWandMagicSparkles,
  },
});

export const Callout = meta.story({});

The callout.stories.ts file has no errors.

// platform-label.stories.ts

import preview from "#.storybook/preview";

import PlatformLabelComponent from "./platform-label";

const meta = preview.meta({
  component: PlatformLabelComponent,
  title: "Messages/Platform Label",
  argTypes: {
    children: { control: false },
    platform: {
      control: "select",
      type: {
        name: "enum",
        required: true,
        value: ["facebook", "youtube"],
      },
    },
  },
  args: {
    platform: "facebook",
  },
});

export const PlatformLabel = meta.story({});

The platform-label.stories.ts file has errors for the PlatformLabel declaration (the BackgroundsGlobals and ViewportGlobals ones) and the Property 'args' is missing error on the {}. Weirdly enough, if I just copy in the same args property there, there's no error (but the BackgroundsGlobals and ViewportGlobals errors remain), even though it should obviously be inheriting that from meta declaration.

The only difference I can think of that would somehow play into it is that the PlatformLabel component has some complicated typing on children (children?: ((message: string) => React.ReactNode | null) | undefined), and maybe things in meta.story() are either wrongly assuming that children can only be ReactNode and breaking otherwise, or pulling in different types based on the type of children.

nx-cloud · 2025-12-15T14:07:37Z

View your CI Pipeline Execution ↗ for commit c2f16e3

☁️ Nx Cloud last updated this comment at 2025-12-15 14:07:50 UTC

coderabbitai · 2025-12-15T14:11:18Z

📝 Walkthrough

Walkthrough

Added re-exported type declarations from preview modules to core-annotations.ts, exposing ActionsTypes, BackgroundsGlobals, BackgroundTypes, ControlsTypes, HighlightTypes, MeasureTypes, OutlineTypes, TestTypes, ViewportGlobals, and ViewportTypes from their respective module paths.

Changes

Cohort / File(s)	Change Summary
Type re-exports `code/core/src/csf/core-annotations.ts`	Added nine re-exported type declarations from preview modules (actions, backgrounds, controls, highlight, measure, outline, test, viewport) to expand public API surface

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Straightforward type re-exports with no logic changes or dependencies to validate
Single file modified with consistent, repetitive re-export pattern

Possibly related PRs

storybookjs/storybook#33216: Adds missing type-only re-exports (BackgroundsGlobals, ViewportGlobals, and other preview types) to expand the public API surface.

✨ 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 6f262ad and c2f16e3.

📒 Files selected for processing (1)

code/core/src/csf/core-annotations.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,json,html,ts,tsx,mjs}