How to enable experimental decorators in Storybook 8 w/ NextJS/SWC

[olivierr91]

Summary

I have class decorators in my code and it makes the build to crash.

Module build failed (from ./node_modules/@storybook/nextjs/dist/swc/next-swc-loader-patch.js):
Error:
  × Expression expected

I have read the Storybook docs about SWC and they are highly confusing. I am using Storybook 8 with the "@storybook/nextjs" framework. When lunching storybook, in the console it says "info => Using SWC as compiler", even though Storybook doc says SWC is not enabled by default and I have not enabled SWC anywhere in the config? Why is it using SWC? Anyway.

So as per the SWC docs and the Storybook docs, I have added this to my Storybook main.ts file:

const config: StorybookConfig = {
...
swc: (config: Options, options): Options => {
        return {
            ...config,
            jsc: {
                parser: {
                    decorators: true
                }
            }
        };
    },
}

But that code here, is not even being executed. I could throw an exception there and it's not even thrown.

So, how I do I enable decorator support with Storybook 8 and NextJs?

Additional information

No response

Create a reproduction

No response

[valentinpalkovic]

Hi @olivierr91

Thank you for reporting your concerns.

@jonniebigodes It looks like the docs https://storybook.js.org/docs/get-started/nextjs#getting-started miss some clarification of when Babel and when SWC is used. I think this is only documented in the migration guide:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automatic-swc-mode-detection

As you can read in the SWC migration guide, SWC is used in the following scenarios:

• If you use Next.js 14 or higher and don't have a .babelrc file, Storybook will use SWC to transpile your code.
• Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental experimental.forceSwcTransforms flag to true in your next.config.js.

Storybook, therefore, behaves like Next.js to decide whether to use SWC or Babel.

The swc configuration in your main.js|ts file is only picked up when you use Webpack5 in combination with the @storybook/addon-webpack5-compiler-swc add-on. The Next.js integration is an exception because we had to built-in a custom SWC compiler, which reuses Next.js' SWC compiler. Therefore these settings are not picked up.

Can you tell me whether Next.js needs additional configuration to support decorators or is it just working out of the box?
Could you also provide a simple reproduction?

[olivierr91]

Hi @valentinpalkovic

I do not use babel in the project. The default SWC Next compiler is used, without any additional configuration. The only configuration I have is the decorator flags in tsconfig.json

{
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
}

The NextJs SWC compiler detects and supports decorators out-of-the-box when the propoer flags are set in tsconfig.json, as stated here:

https://nextjs.org/docs/architecture/nextjs-compiler#legacy-decorators

So if you say Storybook just reuses the Next compiler, the settings should be picked up but it seems they aren't. The DI library we use (Tsyringe) has not been updated to use the newer TS 5 decorators, so we are stuck using these legacy decorators for the moment.

With that additional information, let me know if you still need a reproduction.

[jmotes]

For anyone coming here and looking to enable the newer TS 5 decorators, they are not yet supported with Next.js + SWC:

vercel/next.js#48360

I suppose this means that only way you can get this to work for both Storybook and Next is to disable SWC and use the legacy decorators ("experimentalDecorators": true).