Skip to content

Conversation

@icopp
Copy link
Contributor

@icopp icopp commented Dec 12, 2025

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
Copy link
Contributor

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
Copy link
Contributor Author

icopp commented Dec 12, 2025

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
Copy link
Contributor

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

@mrginglymus
Copy link
Contributor

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
Copy link
Contributor Author

icopp commented Dec 12, 2025

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
Copy link
Contributor

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
Copy link
Contributor

mrginglymus commented Dec 12, 2025

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
Copy link
Contributor Author

icopp commented Dec 12, 2025

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
Copy link
Contributor

Well that's very doomed :)

Typescript version?

@icopp
Copy link
Contributor Author

icopp commented Dec 14, 2025

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
Copy link

nx-cloud bot commented Dec 15, 2025

View your CI Pipeline Execution ↗ for commit d81ec4c

Command Status Duration Result
nx run-many --targets compile ✅ Succeeded 33s View ↗

☁️ Nx Cloud last updated this comment at 2025-12-24 09:51:43 UTC

@coderabbitai

This comment was marked as spam.

@storybook-app-bot
Copy link

storybook-app-bot bot commented Dec 15, 2025

Package Benchmarks

Commit: d81ec4c, ran on 24 December 2025 at 10:01:20 UTC

No significant changes detected, all good. 👏

@unional
Copy link
Contributor

unional commented Dec 15, 2025

@icopp is it possible that you have multiple versions of storybook in your node_modules? Maybe dedupe and/or delete node_modules and reinstall would help.

@icopp
Copy link
Contributor Author

icopp commented Dec 15, 2025

@icopp is it possible that you have multiple versions of storybook in your node_modules? Maybe deduce and/or delete node_modules and reinstall would help.

That was literally the first thing I checked. There's only one version in node_modules, and directly editing the file at node_modules/storybook/dist/csf/index.d.ts to export the BackgroundsGlobals and ViewportGlobals types declared there in the built file fixes the type error.

@ndelangen ndelangen changed the title Export additional types from core-annotations to reduce cannot be named errors TypeScript: Reduce cannot be named errors Dec 24, 2025
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.

6 participants