Join live session: Top 8 Storybook myths holding your team back
Docs
Storybook Docs

swc

Parent: main.js|ts configuration

Type: (config: swc.Options, options: Options) => swc.Options | Promise<swc.Options>

Customize Storybook's SWC setup.

.storybook/main.ts
// Replace your-framework with the webpack-based framework you are using (e.g., react-webpack5)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: {
    name: '@storybook/your-framework',
    options: {
      builder: {
        useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6
      },
    },
  },
  swc: (config, options) => {
    return {
      ...config,
      // Apply your custom SWC configuration
    };
  },
};
 
export default config;

SWC.Options

See SWC's documentation for more information.

Options

Type: { configType?: 'DEVELOPMENT' | 'PRODUCTION' }

There are other options that are difficult to document here. Please introspect the type definition for more information.