[Bug]: Type 'PreviewAddon<AddonTypes>' is not assignable to type 'PluginOption'.ts(2769), when initializing storybook vitest addon

[ehoodgoren]

Describe the bug

I used the vitest.config.ts example config from the docs' page "Vitest addon":

import { defineConfig, defineProject, mergeConfig } from 'vitest/config';

import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';

import path from 'node:path';
import { fileURLToPath } from 'node:url';

const dirname = path.dirname(fileURLToPath(import.meta.url));

import viteConfig from './vite.config';

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      // Use `workspace` field in Vitest < 3.2
      projects: [
        defineProject({
          extends: true,
          plugins: [
            storybookTest({
              // The location of your Storybook config, main.js|ts
              configDir: path.join(dirname, '.storybook'),
              // This should match your package.json script to run Storybook
              // The --no-open flag will skip the automatic opening of a browser
              storybookScript: 'yarn storybook --no-open',
            }),
          ],
          test: {
            name: 'storybook',
            // Enable browser mode
            browser: {
              enabled: true,
              // Make sure to install Playwright
              provider: 'playwright',
              headless: true,
              instances: [{ browser: 'chromium' }],
            },
            setupFiles: ['./.storybook/vitest.setup.ts'],
          },
        }),
      ],
    },
  }),
);

The first error is what's already raised in #32127 - the import is wrong, there's no named export storybookTest. Fixing the import as the IDE suggests to the default import fixes that issue.
We then move to the main point of this issue - the storybookTest part has an error:
Type 'PreviewAddon<AddonTypes>' is not assignable to type 'PluginOption'.ts(2769)

My vitest.setup.ts is exactly as initialized with the npx storybook add @storybook/addon-vitest command:

import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import { setProjectAnnotations } from '@storybook/react-vite';
import * as projectAnnotations from './preview';

// This is an important step to apply the right configuration when testing your stories.
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

By the way, the reason I had to make manual changes to vitest.config.ts is that part failed when I ran the
npx storybook add @storybook/addon-vitest command.

I was able to reproduce both issues exactly as they happen in my local env in the attached stackblitz. I updated some versions to match what I have locally, which is basically storyboook 9.x.x latest, vitest 3.x.x latest.
I use npm.

Looking forward to adopt the new vitest addon in my team's storybook!

Reproduction link

https://stackblitz.com/edit/github-nfsbyspe?file=vitest.config.ts

Reproduction steps

Go to the file vitest.config.ts. See the error on storybookTest.

System

Storybook Environment Info:

  System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    Yarn: 1.22.22 - ~/sentra/sentra-app/node_modules/.bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.2/bin/npm <----- active
  Browsers:
    Safari: 17.6
  npmPackages:
    @storybook/addon-a11y: ^9.1.15 => 9.1.15 
    @storybook/addon-docs: ^9.1.15 => 9.1.15 
    @storybook/addon-links: ^9.1.15 => 9.1.15 
    @storybook/addon-vitest: ^9.1.16 => 9.1.16 
    @storybook/react-vite: ^9.1.15 => 9.1.15 
    chromatic: ^9.1.0 => 9.1.0 
    eslint-plugin-storybook: ^9.1.15 => 9.1.15 
    msw-storybook-addon: ^2.0.6 => 2.0.6 
    storybook: ^9.1.15 => 9.1.15

Additional context

No response

[dosubot]

Hi @ehoodgoren! I'm Dosu and I’m helping the storybook team.

The type error happens because storybookTest is an async function that returns a Promise of an array of Vitest plugins, not a single plugin or plugin array synchronously. Vitest expects plugins to be provided directly, not as a Promise. This mismatch causes the TypeScript error you’re seeing [source].

How to fix:
You need to await the result of storybookTest before passing it to the plugins array. However, Vitest config files (vitest.config.ts) do not support top-level await unless you are using ESM and your environment supports it. If you are using ESM, you can do:

const storybookPlugins = await storybookTest({
  configDir: path.join(dirname, '.storybook'),
  storybookScript: 'yarn storybook --no-open',
});

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      projects: [
        defineProject({
          extends: true,
          plugins: [
            ...storybookPlugins,
          ],
          // ...rest of your config
        }),
      ],
    },
  }),
);

If your environment does not support top-level await, you’ll need to use a dynamic async function to build and export your config, or switch your config to .mts (ESM module) and ensure your tooling supports it.

Extra tip:
If you’re still seeing type errors, make sure your TypeScript moduleResolution is set to "bundler" in tsconfig.json, as this resolves some interop issues with ESM/CJS packages [source].

Let me know if you need an example for a specific setup!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[ehoodgoren]

There's one more issue - it looks like you can't set extends: true in defineProject as the example config from the docs does, see this error (also from the attached stackblitz):

[dosubot]

The extends: true property isn't valid in Vitest's project config for current versions, which is why you're seeing a TypeScript error. The example in the docs using extends: true is outdated and not supported anymore.

Instead, you should use a plain object for your project config, and if you need to extend another config, set extends to a string path (e.g., './vite.config.ts')—but only in workspace files, not inside defineProject. For most setups, you can skip defineProject entirely and use defineConfig with a plugins array and a test property. Here’s a corrected pattern:

import { defineConfig, mergeConfig } from 'vitest/config';
import storybookTest from '@storybook/addon-vitest/vitest-plugin';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import viteConfig from './vite.config';

const dirname = path.dirname(fileURLToPath(import.meta.url));

export default mergeConfig(
  viteConfig,
  defineConfig({
    plugins: [
      storybookTest({
        configDir: path.join(dirname, '.storybook'),
        storybookScript: 'yarn storybook --no-open',
      }),
    ],
    test: {
      name: 'storybook',
      browser: {
        enabled: true,
        provider: 'playwright',
        headless: true,
        instances: [{ browser: 'chromium' }],
      },
      setupFiles: ['./.storybook/vitest.setup.ts'],
    },
  })
);

This avoids the extends error and matches the current recommended usage for Storybook and Vitest integration [docs]. If you need multiple projects, use a workspace config and set extends to a string path, not true [docs].

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[valentinpalkovic]

Hi @ehoodgoren,

The issue is that you have forgotten to add vitest.config.ts to your tsconfig.node.json include array. After adding it, the types should be correct.