Converting from webpack+storybook to vite+storybook(6.5.16) [React] Help Needed

[Arun-chaitanya]

Here is .storybook/main.ts

import { createEntry } from '../webpack.config'

const config: StorybookConfig = {
    stories: ['../frontend/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
    addons: [
        {
            name: '@storybook/addon-docs',
            options: {
                sourceLoaderOptions: {
                    injectStoryParameters: false,
                },
            },
        },
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-storysource',
        '@storybook/addon-a11y',
        'storybook-addon-pseudo-states',
    ],
    staticDirs: ['public'],
    webpackFinal: (config) => {
        const mainConfig = createEntry('main')
        return {
            ...config,
            resolve: {
                ...config.resolve,
                extensions: [...config.resolve!.extensions!, ...mainConfig.resolve.extensions],
                alias: { ...config.resolve!.alias, ...mainConfig.resolve.alias },
            },
            module: {
                ...config.module,
                rules: [
                    ...mainConfig.module.rules,
                    ...config.module!.rules.filter((rule) => rule.test!.toString().includes('.mdx')),
                    {
                        test: /\.stories\.tsx?$/,
                        use: [
                            {
                                loader: require.resolve('@storybook/source-loader'),
                                options: { parser: 'typescript' },
                            },
                        ],
                        enforce: 'pre',
                    },
                ],
            },
        }
    },
    features: {
        postcss: false,
    },
}

export default config

Earlier I was using Webpack for my frontend, now I am shifting to Vite and need your help to convert my main.ts accordingly.

Here are all the related storybook packages and their versions

"@storybook/addon-a11y": "^6.5.16",
        "@storybook/addon-actions": "^6.5.16",
        "@storybook/addon-essentials": "^6.5.16",
        "@storybook/addon-links": "^6.5.16",
        "@storybook/addon-storysource": "^6.5.16",
        "@storybook/addons": "^6.5.16",
        "@storybook/api": "^6.5.16",
        "@storybook/components": "^6.5.16",
        "@storybook/core-events": "^6.5.16",
        "@storybook/react": "^6.5.16",
        "@storybook/source-loader": "^6.5.16",
        "@storybook/test-runner": "^0.9.4",
        "@storybook/theming": "^6.5.16",

[Arun-chaitanya]

This is my createEntry

function createEntry(entry) {
    const commonLoadersForSassAndLess = [
        {
            loader: 'style-loader',
        },
        {
            // This loader resolves url() and @imports inside CSS
            loader: 'css-loader',
        },
        {
            // Then we apply postCSS fixes like autoprefixer and minifying
            loader: 'postcss-loader',
        },
    ]

    return {
        name: entry,
        mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
        devtool:
            process.env.GENERATE_SOURCEMAP === 'false'
                ? false
                : process.env.NODE_ENV === 'production'
                ? 'source-map'
                : 'inline-source-map',
        entry: {
            [entry]: entry === 'main' || entry === 'cypress' ? './frontend/src/index.tsx' : null,
        },
        watchOptions: {
            ignored: /node_modules/,
        },
        output: {
            path: path.resolve(__dirname, 'frontend', 'dist'),
            chunkFilename: '[name].[contenthash].js',
            publicPath: process.env.JS_URL
                ? `${process.env.JS_URL}${process.env.JS_URL.endsWith('/') ? '' : '/'}static/`
                : process.env.NODE_ENV === 'production'
                ? '/static/'
                : `http${process.env.LOCAL_HTTPS ? 's' : ''}://${webpackDevServerFrontendAddr}:8234/static/`,
        },
        resolve: {
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            alias: {
                '~': path.resolve(__dirname, 'frontend', 'src'),
                lib: path.resolve(__dirname, 'frontend', 'src', 'lib'),
                scenes: path.resolve(__dirname, 'frontend', 'src', 'scenes'),
                '@posthog/apps-common': path.resolve(__dirname, 'frontend', '@posthog', 'apps-common', 'src'),
                '@posthog/lemon-ui': path.resolve(__dirname, 'frontend', '@posthog', 'lemon-ui', 'src'),
                storybook: path.resolve(__dirname, '.storybook'),
                types: path.resolve(__dirname, 'frontend', 'types'),
                public: path.resolve(__dirname, 'frontend', 'public'),
                cypress: path.resolve(__dirname, 'cypress'),
                process: 'process/browser',
            },
        },
        module: {
            rules: [
                {
                    test: /\.stories\.[jt]sx?$/,
                    use: [require.resolve('@storybook/source-loader')],
                },
                {
                    test: /\.[jt]sx?$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                    },
                },
                {
                    // Apply rule for .sass, .scss or .css files
                    test: /\.(sa|sc|c)ss$/,

                    // Set loaders to transform files.
                    // Loaders are applying from right to left(!)
                    // The first loader will be applied after others
                    use: [
                        ...commonLoadersForSassAndLess,
                        {
                            // First we transform SASS to standard CSS
                            loader: 'sass-loader',
                            options: {
                                implementation: require('sass'),
                            },
                        },
                    ].filter((a) => a),
                },
                {
                    // Apply rule for less files (used to import and override AntD)
                    test: /\.(less)$/,
                    use: [
                        ...commonLoadersForSassAndLess,
                        {
                            loader: 'less-loader', // compiles Less to CSS
                            options: {
                                lessOptions: {
                                    javascriptEnabled: true,
                                },
                            },
                        },
                    ],
                },

                {
                    // Now we apply rule for images
                    test: /\.(png|jpe?g|gif|svg|lottie)$/,
                    use: [
                        {
                            // Using file-loader for these files
                            loader: 'file-loader',

                            // In options we can set different things like format
                            // and directory to save
                            options: {
                                name: '[name].[contenthash].[ext]',
                                outputPath: 'images',
                            },
                        },
                    ],
                },
                {
                    // Apply rule for fonts files
                    test: /\.(woff|woff2|ttf|otf|eot)$/,
                    use: [
                        {
                            // Using file-loader too
                            loader: 'file-loader',
                            options: {
                                name: '[name].[contenthash].[ext]',
                                outputPath: 'fonts',
                            },
                        },
                    ],
                },
                {
                    // Apply rule for sound files
                    test: /\.(mp3)$/,
                    use: [
                        {
                            // Using file-loader too
                            loader: 'file-loader',
                            options: {
                                name: '[name].[contenthash].[ext]',
                                outputPath: 'sounds',
                            },
                        },
                    ],
                },
                // probably only need this because we're using webpack v4
                {
                    test: /monaco-editor\/.*\.m?js/,
                    loader: 'babel-loader',
                },
            ],
        },
        // add devServer config only to 'main' entry
        ...(entry === 'main'
            ? {
                  devServer: {
                      contentBase: path.join(__dirname, 'frontend', 'dist'),
                      hot: true,
                      host: webpackDevServerHost,
                      port: 8234,
                      stats: 'minimal',
                      disableHostCheck: !!process.env.LOCAL_HTTPS,
                      public: process.env.JS_URL
                          ? new URL(process.env.JS_URL).host
                          : `${webpackDevServerFrontendAddr}:8234`,
                      headers: {
                          'Access-Control-Allow-Origin': '*',
                          'Access-Control-Allow-Headers': '*',
                      },
                  },
              }
            : {}),
        plugins: [
            new MonacoWebpackPlugin(),
            new AntdDayjsWebpackPlugin(),
            // common plugins for all entrypoints
        ].concat(
            entry === 'main'
                ? [
                      // we need these only once per build
                      new HtmlWebpackPlugin({
                          alwaysWriteToDisk: true,
                          title: 'PostHog',
                          template: path.join(__dirname, 'frontend', 'src', 'index.html'),
                      }),

                      new HtmlWebpackPlugin({
                          alwaysWriteToDisk: true,
                          title: 'PostHog',
                          filename: 'layout.html',
                          inject: false,
                          template: path.join(__dirname, 'frontend', 'src', 'layout.ejs'),
                      }),
                      new HtmlWebpackHarddiskPlugin(),
                  ]
                : entry === 'cypress'
                ? [
                      new HtmlWebpackHarddiskPlugin(),
                      new webpack.ProvidePlugin({
                          process: 'process/browser',
                      }),
                  ]
                : []
        ),
    }
}