Storybook config for alias module with Vite

main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import { mergeConfig } from 'vite';
import path from 'path';

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  viteFinal: async (config, { configType }) => {
    console.log(__dirname);
    return mergeConfig(config, {
      resolve: {
        alias: {
          '@/components': path.resolve(__dirname, "../components"),
          '@/styles': path.resolve(__dirname, "../styles"),
        },
      },
    });
  },
};
export default config;