import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path'; // Plugin to suppress CSS minification warnings const suppressCssWarnings = () => { return { name: 'suppress-css-warnings', buildStart() { // Intercept console.warn const originalWarn = console.warn; console.warn = (...args: any[]) => { const message = args.join(' '); // Suppress CSS syntax error warnings (known issue with Tailwind) if (message.includes('css-syntax-error') || message.includes('Unexpected "header"')) { return; } originalWarn.apply(console, args); }; // Intercept process.stderr.write (where esbuild outputs warnings) const originalStderrWrite = process.stderr.write.bind(process.stderr); process.stderr.write = (chunk: any, encoding?: any, callback?: any) => { const message = chunk?.toString() || ''; // Suppress CSS syntax error warnings if (message.includes('css-syntax-error') || message.includes('Unexpected "header"')) { if (typeof callback === 'function') callback(); return true; } return originalStderrWrite(chunk, encoding, callback); }; }, }; }; // Plugin to ensure proper chunk loading order // React must load before Radix UI to prevent "Cannot access 'React' before initialization" errors const ensureChunkOrder = () => { return { name: 'ensure-chunk-order', generateBundle(options: any, bundle: any) { // Find React vendor chunk and ensure it's loaded first const reactChunk = Object.keys(bundle).find( (key) => bundle[key].type === 'chunk' && bundle[key].name === 'react-vendor' ); if (reactChunk) { // Ensure Radix vendor chunk depends on React vendor chunk Object.keys(bundle).forEach((key) => { const chunk = bundle[key]; if (chunk.type === 'chunk' && chunk.name === 'radix-vendor') { if (!chunk.imports) chunk.imports = []; if (!chunk.imports.includes(reactChunk)) { chunk.imports.push(reactChunk); } } }); } }, }; }; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), suppressCssWarnings(), ensureChunkOrder()], resolve: { alias: { '@': path.resolve(__dirname, './src'), '@/components': path.resolve(__dirname, './src/components'), '@/utils': path.resolve(__dirname, './src/utils'), '@/styles': path.resolve(__dirname, './src/styles'), '@/types': path.resolve(__dirname, './src/types'), }, }, server: { port: 3000, open: true, host: true, allowedHosts: ['9b89f4bfd360.ngrok-free.app','c6ba819712b5.ngrok-free.app'], }, build: { outDir: 'dist', sourcemap: true, // CSS minification warning is harmless - it's a known issue with certain Tailwind class combinations // Re-enable minification with settings that preserve initialization order // The "Cannot access 'React' before initialization" error is fixed by keeping React in main bundle minify: 'esbuild', // Preserve class names to help with debugging and prevent initialization issues terserOptions: undefined, // Use esbuild minifier instead // Ensure proper module format to prevent circular dependency issues modulePreload: { polyfill: true }, commonjsOptions: { // Help resolve circular dependencies include: [/node_modules/], transformMixedEsModules: true, }, rollupOptions: { onwarn(warning, warn) { // Suppress circular dependency warnings for known issues if (warning.code === 'CIRCULAR_DEPENDENCY') { // Allow circular deps between Radix UI packages (they handle it internally) if (warning.message?.includes('@radix-ui') || warning.message?.includes('react-primitive')) { return; } } // Suppress CSS minification warnings (known issue with Tailwind class combinations) if (warning.code === 'css-syntax-error' && warning.message?.includes('header')) { return; } // Suppress all CSS syntax errors (they're usually false positives from minifier) if (warning.code === 'css-syntax-error') { return; } // Use default warning handler for other warnings warn(warning); }, output: { // Preserve module structure to prevent circular dependency issues preserveModules: false, // Ensure proper chunk ordering and prevent circular dependency issues chunkFileNames: 'assets/[name]-[hash].js', // Explicitly define chunk order - React must load before Radix UI manualChunks(id) { // CRITICAL FIX: Keep React in main bundle OR ensure it loads first // The "Cannot access 'React' before initialization" error occurs when // Radix UI components try to access React before it's initialized // Option 1: Don't split React - keep it in main bundle (most reliable) // Option 2: Keep React in separate chunk but ensure it loads first // For now, let's keep React in main bundle to avoid initialization issues // Only split other vendors // Radix UI - CRITICAL: ALL Radix packages MUST stay together in ONE chunk // This chunk will import React from the main bundle, avoiding initialization issues if (id.includes('node_modules/@radix-ui')) { return 'radix-vendor'; } // Don't split React - keep it in main bundle to ensure proper initialization // This prevents "Cannot access 'React' before initialization" errors // UI libraries if (id.includes('node_modules/lucide-react') || id.includes('node_modules/sonner')) { return 'ui-vendor'; } // Router if (id.includes('node_modules/react-router')) { return 'router-vendor'; } // Redux if (id.includes('node_modules/@reduxjs') || id.includes('node_modules/redux')) { return 'redux-vendor'; } // Socket.io if (id.includes('node_modules/socket.io')) { return 'socket-vendor'; } // Large charting library if (id.includes('node_modules/recharts')) { return 'charts-vendor'; } // Other large dependencies if (id.includes('node_modules/axios') || id.includes('node_modules/date-fns')) { return 'utils-vendor'; } // Don't split our own code into chunks to avoid circular deps }, entryFileNames: 'assets/[name]-[hash].js', // Use ES format but ensure proper chunk dependencies format: 'es', // Ensure proper chunk dependency order // React vendor must be loaded before Radix vendor // This is handled by the ensureChunkOrder plugin }, }, chunkSizeWarningLimit: 1500, // Increased limit since we have manual chunks }, optimizeDeps: { include: [ 'react', 'react-dom', 'lucide-react', // Pre-bundle Radix UI components together to prevent circular deps '@radix-ui/react-label', '@radix-ui/react-slot', '@radix-ui/react-primitive', ], // Ensure Radix UI components are pre-bundled together esbuildOptions: { // Prevent circular dependency issues keepNames: true, // Target ES2020 for better module handling target: 'es2020', // Preserve module initialization order preserveSymlinks: false, }, }, });