[Bug]: @storybook/nextjs does not support satisfies

[robcaldecott]

Describe the bug

Yesterday I read about support for using satisfies in stories here: https://storybook.js.org/blog/improved-type-safety-in-storybook-7/

However, it does not work in the 7.0 beta 45 using @storybook/nextjs and generates a babel error:

File was processed with these loaders:
 * ./node_modules/.pnpm/@pmmmwh+react-refresh-webpack-plugin@0.5.10_ohj47mxwagpoxvu7nhhwxzphqm/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/.pnpm/babel-loader@9.1.2_la66t7xldg4uecmyawueag5wkm/node_modules/babel-loader/lib/index.js
 * ./node_modules/.pnpm/unplugin@0.10.2/node_modules/unplugin/dist/webpack/loaders/load.js
You may need an additional loader to handle the result of these loaders.
|   title: "Components/Alert",
|   component: Alert
> } satisfies Meta);
| export default meta;
| export var NoAction = {

I am using TS 4.9.5 and in my editor the code is not generating a TS error. In my demo the components/Alert/Alert.stories.tsx file looks like this:

import { Meta, StoryObj } from "@storybook/react";
import { Alert } from ".";

const meta = {
  title: "Components/Alert",
  component: Alert,
} satisfies Meta<typeof Alert>;

export default meta;

type Story = StoryObj<typeof meta>;

export const NoAction: Story = {
  args: {
    label: "This is an alert without an action.",
  },
};

Note that satisfies works fine in the NextJS app itself.

To Reproduce

git clone git@github.com:robcaldecott/next-tailwind.git -b storybook-7-beta-satisfies
cd next-tailwind
pnpm install
pnpm storybook

System

System:
    OS: macOS 12.6.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.77
    Firefox: 109.0
    Safari: 16.1
  npmPackages:
    @storybook/addon-actions: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/addon-essentials: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/addon-interactions: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/addon-links: ^7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/nextjs: 7.0.0-beta.45 => 7.0.0-beta.45 
    @storybook/react: ^7.0.0-beta.45 => 7.0.0-beta.45

Additional context

No response

[pdeva]

i am running into the same issue with nextjs and typescript 4.9.5. using storybook 7.0.0-beta.44.

Screenshot showing all the details:

[ild0tt0re]

Same issue, also from a clean repro with SB CLI

[diginikkari]

Same here typescript 4.9.5 and storybook 7.0.0-beta.45. Here is minimal repro: https://github.com/diginikkari/storybook-satisfies-issue

[cellog]

note that this is not just SB 7.0. In storybook 6.5.15 this also crashes if satisfies is used anywhere in the code, not just in the stories

[kasperpeulen]

Shall we look at this one together @valentinpalkovic? Seems quite some people are affected @vanessayuenn @shilman

[ild0tt0re]

note that this is not just SB 7.0. In storybook 6.5.15 this also crashes if satisfies is used anywhere in the code, not just in the stories

I confirm, we too are completely blocked, we make extensive use of satisfies now in the code

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.55 containing PR #21104 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[mauricekleine]

Thanks @valentinpalkovic and @shilman, I can confirm that in my case, satisfies is now working as expected!

[cellog]

is there a separate issue tracking this for the 6.5 version?

[valentinpalkovic]

@cellog No. We will only port critical security fixes back to 6.5.

[cellog]

@cellog No. We will only port critical security fixes back to 6.5.

I understand. I disagree strongly with that decision because of both the developer experience, and the risk it poses to the business model of Chromatic.

7.0 stable is not out yet, and a bug that prevents us from taking advantage of a recent but still relatively old TS version won't be back-ported. We are still struggling to migrate our stories from knobs to controls, the pace of breaking changes to storybook has been very difficult to keep up with. It opens up opportunities for others to step in. This is the kind of signal that makes us start to investigate alternatives to storybook more seriously.

Your prerogative, of course, and take this for what it is: friendly advice. Thank you for the reply.

[valentinpalkovic]

@cellog, I understand your concerns and appreciate them! I can at least offer to help you find a workaround for 6.5.

So, as far as I can see, the @storybook/nextjs doesn't even exist for version 6. I am curious about how you use Next.js in Storybook. This ticket was about fixing @storybook/nextjs to support satisfies. Do you use @storybook/nextjs as well in your Storybook 6.5 project?

[cellog]

@valentinpalkovic we are not using nextjs. We are just using storybook as-is with babel. We only just migrated to babelV7, so perhaps that will give us the control we need to fix this?