allmy.work/config/storybook/main.ts

import type { StorybookConfig } from '@storybook/svelte-vite';
import {
  dirname,
  resolve,
} from 'path';
import { fileURLToPath } from 'url';
import {
  loadConfigFromFile,
  mergeConfig,
} from 'vite';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const config: StorybookConfig = {
  stories: [
    '../../src/**/*.mdx',
    '../../src/**/*.stories.@(js|ts|svelte)',
  ],
  addons: [
    {
      name: '@storybook/addon-svelte-csf',
      options: {
        // Use modern template syntax for better performance
        legacyTemplate: false,
      },
    },
    '@chromatic-com/storybook',
    '@storybook/addon-vitest',
    '@storybook/addon-a11y',
    '@storybook/addon-docs',
  ],
  framework: '@storybook/svelte-vite',
  async viteFinal(config) {
    // This attempts to find your actual vite.config.ts
    const { config: userConfig } = await loadConfigFromFile(
      { command: 'serve', mode: 'development' },
      resolve(__dirname, '../../vite.config.ts'),
    ) || {};

    const mergedConfig = mergeConfig(config, {
      // Merge resolve/alias parts to maintain path aliases
      resolve: userConfig?.resolve || {},
    });

    const { svelte } = await import('@sveltejs/vite-plugin-svelte');
    mergedConfig.plugins = mergedConfig.plugins || [];

    // Add Svelte plugin to process @storybook's .svelte files
    // This prevents Vite from trying to parse them before compilation
    mergedConfig.plugins.unshift(svelte({
      include: [/node_modules\/@storybook\/.+\.svelte$/],
    }));

    return mergedConfig;
  },
};

export default config;