storybook: [Bug]: `decorators` causes TS error

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/@storybook+types@7.5.2/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.

About this issue

Original URL
State: open
Created 8 months ago
Reactions: 6
Comments: 15 (9 by maintainers)

Most upvoted comments

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;

YouHusam on Dec 18, 2023

I have the same issue.

sirtobey on Nov 27, 2023

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 on Feb 26, 2024

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.

peterctct on Nov 30, 2023