Vite + React extended config

vite.config.ts

import dns from 'dns';
import path from 'path';

import react from '@vitejs/plugin-react';
import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
import checker from 'vite-plugin-checker';
import svgr from 'vite-plugin-svgr';

// Open localhost instead of 127.0.0.1
dns.setDefaultResultOrder('verbatim');

const resolvePath = (dir: string) => path.resolve(__dirname, dir);
const resolvePolyfillPath = (moduleName: string) =>
  `rollup-plugin-node-polyfills/polyfills/${moduleName}`;

// https://vitejs.dev/config/

const config = ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  const isProductionEnv = process.env.VITE_APP_WORKSPACE_ENV === 'Master';
  const isSourcemapEnabled = !isProductionEnv;

  return defineConfig({
    plugins: [
      splitVendorChunkPlugin(),
      react(),
      svgr(),
      checker({ typescript: true, enableBuild: false }),
    ],
    optimizeDeps: {
      include: ['react/jsx-runtime'],
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
      },
    },
    define: {
      'global.performance': 'globalThis.performance',
      'global.TYPED_ARRAY_SUPPORT': 'undefined',
    },
    build: {
      sourcemap: isSourcemapEnabled,
      commonjsOptions: {
        sourceMap: isSourcemapEnabled,
      },
      outDir: resolvePath('build'),
      assetsInlineLimit: 0,
    },
    resolve: {
      alias: {
        src: resolvePath('src'),
        './runtimeConfig': './runtimeConfig.browser',
        util: resolvePolyfillPath('util'),
        sys: resolvePolyfillPath('util'),
        events: resolvePolyfillPath('events'),
        stream: resolvePolyfillPath('stream'),
        path: resolvePolyfillPath('path'),
        querystring: resolvePolyfillPath('qs'),
        punycode: resolvePolyfillPath('punycode'),
        url: resolvePolyfillPath('url'),
        string_decoder: resolvePolyfillPath('string-decoder'),
        http: resolvePolyfillPath('http'),
        https: resolvePolyfillPath('http'),
        os: resolvePolyfillPath('os'),
        assert: resolvePolyfillPath('assert'),
        constants: resolvePolyfillPath('constants'),
        _stream_duplex: resolvePolyfillPath('readable-stream/duplex'),
        _stream_passthrough: resolvePolyfillPath('readable-stream/passthrough'),
        _stream_readable: resolvePolyfillPath('readable-stream/readable'),
        _stream_writable: resolvePolyfillPath('readable-stream/writable'),
        _stream_transform: resolvePolyfillPath('readable-stream/transform'),
        timers: resolvePolyfillPath('timers'),
        console: resolvePolyfillPath('console'),
        vm: resolvePolyfillPath('vm'),
        zlib: resolvePolyfillPath('zlib'),
        tty: resolvePolyfillPath('tty'),
        domain: resolvePolyfillPath('domain'),
        buffer: resolvePolyfillPath('buffer-es6'),
        process: resolvePolyfillPath('process-es6'),
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    },
    server: {
      port: 3000,
      open: true,
    },
  });
};

export default config;

@esbuild-plugins/node-modules-polyfill dependency is required for pollyfills