如何在 Storybook 8 中使用 NextJS/SWC 启用实验性装饰器

Question

我的代码中有实验性的类装饰器（不是 TypeScript 5 装饰器），它会使 Storybook 构建崩溃。

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

我已经阅读了有关 SWC 的 Storybook 文档，它们非常令人困惑。我正在使用 Storybook 8 和“@storybook/nextjs”框架。吃午餐 Storybook 时，控制台中显示“info => 使用 SWC 作为编译器”，尽管 Storybook 文档说默认情况下未启用 SWC 并且我没有在配置中的任何位置启用 SWC。为什么要使用SWC？无论如何。

因此，根据 SWC 文档和 Storybook 文档，我已将其添加到我的 Storybook main.ts 文件中：

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

但是这里的代码甚至没有被执行。我可以在那里抛出异常，但它甚至没有抛出。

如何启用 Storybook 8 和 NextJs 的装饰器支持？

Answer 1

看看这个：

// This TypeScript code attempts to configure Storybook to enable decorators using SWC with corrected type definitions.
import { StorybookConfig } from '@storybook/nextjs';
import { Options } from '@swc/core';

const config: StorybookConfig = {
  stories: [],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/nextjs',
  core: {
    builder: '@storybook/builder-webpack5'
  },
  typescript: {
    check: false,
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  swc: (config: Options, options: Options): Options => {
    return {
      ...config,
      jsc: {
        parser: {
          syntax: 'typescript',
          decorators: true,
          dynamicImport: true
        },
        transform: {
          legacyDecorator: true,
          decoratorMetadata: true
        }
      }
    };
  }
};

console.log('SWC Configuration for decorators:', config.swc);