[Bug]: decorators causes TS error

[emlai]

Describe the bug

Following the code from the docs, I get a TS error:

TS2742: The inferred type of meta cannot be named without a reference to .pnpm/@[email protected]/node_modules/@storybook/types. This is likely not portable. A type annotation is necessary.

To Reproduce

import type { Meta } from "@storybook/react";

const meta = {
  component: Icon,
  decorators: [
    Story => (
      <div style={{ margin: '3em' }}>
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof Icon>;

export default meta;

If I remove decorators, the error goes away.

System

System:
    OS: macOS 13.5
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.1 - /opt/homebrew/bin/node
    npm: 10.1.0 - /opt/homebrew/bin/npm
    pnpm: 8.6.8 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 16.6

Additional context

TypeScript version is 5.2.2.

Adding import type {} from "@storybook/types" is a workaround but ideally it would not be required.

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[sirtobey]

I have the same issue.

[peterctct]

Also having the same issue on v7.6.2. This is on a fresh project.

Unfortunately, @emlai's workaround of using import type {} from "@storybook/types" does not seem to quiet the TS error in our case.

[Chris112]

After installing @storybook/types as a dev dependency and adding the import to a types.ts file in the root (anywhere in the project out of sight should work) the error went away for me.

[YouHusam]

I have the same issue, workarounds didn't work for me.
Adding type Meta<...> instead of satisfies worked

import type { Meta } from "@storybook/react";

const meta: Meta<typeof Icon> = {
  component: Icon,
  decorators: [
    Story => (
      <div style={{ margin: '3em' }}>
        <Story />
      </div>
    ),
  ],
};

export default meta;

[akifunal]

I have the same issue 🙏🏻

[kasperpeulen]

I can not reproduce this, can you check if this error still happens in the latest storybook, and maybe a stackblitz repro? @emlai

[generatorpoint]

I have the same issue @YouHusam 's workaround fixed it for me

[kasperpeulen]

@generatorpoint Could you make a stackblitz reproduction. I can not reproduce this issue.

[valentinpalkovic]

It is easy to reproduce it in a pnpm environment because the @storybook/types package is not installed in the root directory of node_modules and therefore, TypeScript complains.

[shilman]

@valentinpalkovic is that because there is some type leaking from @storybook/types? AFAIK the user shouldn't ever need to reference that and should get all of their types through the appropriate renderer (e.g. @storybook/react, @storybook/vue3, etc.).

[valentinpalkovic]

So the satisfies Meta<...> annotation of the meta variable tells TypeScript to still infer the proper type of meta. When it tries to infer the type of the StoryFn parameter inside the decorator, it infers it as PartialStoryFn, which is NOT exported from @storybook/react, which I think is the root cause of the issue. There might be still other types, which are available on @storybook/types and which are not re-exported by @storybook/react.

[kasperpeulen]

I can only reproduce this when setting

  "declaration": true,
  "noEmit": false,

in tsconfig

@emlai Are you trying to build TS declaration files for stories.ts files?
I think ideally stories should be excluded when building d.ts files for a library, but maybe I'm overseeing a usecase.

You can achieve this by using a different tsconfig.build.json for building declerations than your regular tsconfig.json file that is used by your IDE or for typechecking in CI.

[kasperpeulen]

@kylegach @vanessayuenn Discussed with @shilman that this is not a blocker for RC.

I think this issue is best solved by instructing people how to exclude *.stories.tsx from emitting d.ts, but still keep it being typechecked.

[vanessayuenn]

potentially related to #25170

[AgataJedryszek-da]

Had the same issue in Storybook v8.3.6. I solved this by rewriting the code so that it's structured the same way as the example in Storybook docs. Without testing the code provided in this issue, it would be:

const meta: Meta<typeof Icon> = {
  component: Icon,
  decorators: [
    Story => (
      <div style={{ margin: '3em' }}>
        <Story />
      </div>
    ),
  ],
};

export default meta;

It seems refactoring to drop satisfies operator solves the problem.