Storybook build using vite: ReferenceError: require is not defined

I'm using Storybook and Vite to build the components. On prod I'm getting this error:

ReferenceError: require is not defined

So I build the project on local and started serving this using http-server. Thus, I'm able to re-produce this on local as well.

I tried adding

import commonjs from 'vite-plugin-commonjs';

into the plugins

But it didn't resolve.

Here's my vite.config

import { UserConfig, defineConfig } from 'vite';
import { resolve } from 'path';
import react from '@vitejs/plugin-react';
import commonjs from 'vite-plugin-commonjs';
import { visualizer } from 'rollup-plugin-visualizer';
import svgr from 'vite-plugin-svgr';
import dts from 'vite-plugin-dts';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
import tsconfigPaths from 'vite-tsconfig-paths';
import packageJson from './package.json';
import tsConfig from './tsconfig.json';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
// https://vitejs.dev/config/
export default defineConfig((): UserConfig => {
  return {
    plugins: [
      react(),
      commonjs(),
      tsconfigPaths(),
      libInjectCss(),
      visualizer({ filename: 'stats/stats.html' }),
      svgr(),
      dts({
        exclude: [
          '**/*.stories.tsx',
          '**/*.test.tsx',
          '**/*.test.ts',
          '**/*.stories.ts',
          'src/test-utils/**',
          'src/mock/**',
          'src/setupTests.ts',
          '**/*._test.tsx',
        ],
        tsconfigPath: './tsconfig.json',
        compilerOptions: {
          baseUrl: tsConfig.compilerOptions.baseUrl,
          paths: tsConfig.compilerOptions.paths,
        },
      }),
    ],
    build: {
      copyPublicDir: false,
      sourcemap: true,
      emptyOutDir: true,
      lib: {
        entry: resolve(__dirname, 'src/index.ts'),
        formats: ['es'],
        name: 'te-components',
      },
rollupOptions: {
plugins: [
peerDepsExternal({ includeDependencies: true }),
nodeResolve({
mainFields: ['module', 'main', 'browser'],
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
}),
],
external: [
...Object.keys(packageJson.dependencies),
...Object.keys(packageJson.peerDependencies),
'react/jsx-runtime',
'@babel/runtime',
'prop-types',
'lodash',
'@mui/system',
'@mui/material',
'@mui/icons-material',
],
output: {
assetFileNames: 'assets/[name][extname]',
entryFileNames: '[name].js',
chunkFileNames: '[name].js',
preserveModules: true,
preserveModulesRoot: 'src',
},
},
},
optimizeDeps: {
include: ['vite-plugin-commonjs'], // List the packages here
esbuildOptions: {
// Ensure that require statements are transformed for ES modules
loader: {
'.js': 'jsx',
},
},
},
};
});