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

babelDefault

Parent: main.js|ts configuration

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

babelDefault allows customization of Storybook's Babel setup. It is applied to the preview config before any user presets have been applied, which makes it useful and recommended for addon authors so that the end user's babel setup can override it.

To adjust your Storybook's Babel setup directly—not via an addon—use babel instead.

import { TransformOptions } from '@babel/core';
 
export function babelDefault(config: TransformOptions) {
  return {
    ...config,
    plugins: [
      ...config.plugins,
      [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'],
    ],
  };
}

Babel.Config

See Babel docs.

Options

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

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