Re_Figma_Code/vite.config.ts

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,
    },
  },
  preview: {
    port: 3000,
  },
});