typescript

Type:

{
  check?: boolean;
  checkOptions?: CheckOptions;
  reactDocgen?: 'react-docgen' | 'react-docgen-typescript' | false;
  reactDocgenTypescriptOptions?: ReactDocgenTypescriptOptions;
  skipCompiler?: boolean;
}

Configures how Storybook handles TypeScript files.

`check`

Type: boolean

Optionally run fork-ts-checker-webpack-plugin. Note that because this uses a Webpack plugin, it is only available when using the Webpack builder.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    check: true,
  },
});

`checkOptions`

Type: CheckOptions

Options to pass to fork-ts-checker-webpack-plugin, if enabled. See docs for available options.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, nextjs, nextjs-webpack5)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    check: true,
    checkOptions: {
      eslint: true,
    },
  },
});

`reactDocgen`

(⛔️ Deprecated)

Type: 'react-docgen' | 'react-docgen-typescript' | false

Default:

false: if @storybook/react is not installed
'react-docgen': if @storybook/react is installed and docgenServer is off

Configures which library, if any, Storybook uses to parse React components on the legacy builder-based path: react-docgen or react-docgen-typescript. Set to false to disable parsing React components. react-docgen-typescript invokes the TypeScript compiler, which makes it slow but generally accurate. react-docgen performs its own analysis, which is much faster but incomplete.

Builder docgen is deprecated and will be removed in Storybook 12. This option only applies when docgenServer is off, and Storybook warns when it runs. Storybook 11 enables server-side docgen by default.

Storybook does not install the libraries for builder docgen. See the Component documentation section of your framework, for example React & Vite, for the packages to install.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    docgenServer: false,
  },
  typescript: {
    reactDocgen: 'react-docgen',
  },
});

`reactDocgenTypescriptOptions`

(⛔️ Deprecated)

Type: ReactDocgenTypescriptOptions

Configures the options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled and docgenServer is off. See docs for available options for Webpack projects or for Vite projects.

Server-side docgen does not translate these options. Like reactDocgen, this option is deprecated and will be removed in Storybook 12.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    docgenServer: false,
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      // 👇 Default prop filter, which excludes props from node_modules
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
});

`skipCompiler`

Type: boolean

Disable parsing of TypeScript files through the compiler, which is used for Webpack5.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    skipCompiler: true,
  },
});