Here is the complete vite.config.js file

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import svgrPlugin from 'vite-plugin-svgr';
import envCompatible from 'vite-plugin-env-compatible';
import react from '@vitejs/plugin-react';
import path from 'path';
import fs from 'fs/promises';
// see all documentation here https://vitejs.dev/config/
export default defineConfig({
  // This changes the out put dir from dist to build change as your need
  // comment this out if that isn't relevant for your project
  build: {
    outDir: 'build',
    rollupOptions: {
      onwarn(warning, warn) {
        // Suppress the specific warning by checking the warning code
        if (
          warning.code === 'THIS_IS_UNDEFINED' ||
          warning.code === 'OTHER_SPECIFIC_WARNING_CODE'
        ) {
          return;
        }
        // Use the default for everything else
        warn(warning);
      },
    },
  },
  css: {
    modules: {
      scopeBehaviour: 'local', // Use 'global' to change default behaviour to global
    },
  },
  plugins: [
    reactRefresh(),
    envCompatible(),
    svgrPlugin({
      svgrOptions: {
        icon: true,
        // ...svgr options (https://react-svgr.com/docs/options/)
      },
    }),
    react({
      jsxRuntime: 'automatic',
      include: [/.jsx?$/], // This will include both .js and .jsx files
    }),
  ],
  resolve: {
    alias: {
      Actions: path.resolve(__dirname, 'src/actions/'),
      Components: path.resolve(__dirname, 'src/components/'),
      Assets: path.resolve(__dirname, 'src/assets/'),
      Util: path.resolve(__dirname, 'src/util/'),
      Routes: path.resolve(__dirname, 'src/routes/'),
      Constants: path.resolve(__dirname, 'src/constants/'),
      Helpers: path.resolve(__dirname, 'src/helpers/'),
      Api: path.resolve(__dirname, 'src/api/'),
      process: 'process/browser',
      stream: 'stream-browserify',
      zlib: 'browserify-zlib',
      buffer: 'buffer',
    },
    fallback: {
      fs: false,
      crypto: false,
      // timers: require.resolve('timers-browserify'),
    },
    extensions: ['.js', '.jsx'], // Ensure Vite resolves both .js and .jsx files
  },
  esbuild: {
    loader: 'jsx',
    include: /src/.*.jsx?$/,
    // loader: "tsx",
    // include: /src/.*.[tj]sx?$/,
    exclude: [],
  },
  optimizeDeps: {
    include: [
      'process',
      'buffer',
      'stream-browserify',
      'browserify-zlib',
      'timers-browserify',
    ],
    esbuildOptions: {
      plugins: [
        {
          name: 'load-js-files-as-jsx',
          setup(build) {
            build.onLoad({ filter: /src/.*.js$/ }, async (args) => ({
              loader: 'jsx',
              contents: await fs.readFile(args.path, 'utf8'),
            }));
          },
        },
      ],
    },
  },
  define: {
    'process.env': {},
    process: {
      env: {},
    },
  },
});

The project was recently migrated to use vite instead of Webpack.
The development server is good, and the production build is also successful but when we serve the build folder that’s when we get this error.
We started getting the error “process is not defined” and we solved looking at a few answers on stack overflow, but now we started getting “require is not defined”