Update

resources/js/pages/home/home.tsx

@@ -1,15 +1,30 @@
 import AuthUser from '@/modules/auth/auth-user';
-import Editor from '@/modules/editor/editor.jsx';
+import { useEffect, useState } from 'react';
 import FAQDiscord from './partials/FAQDiscord.jsx';
 import Features from './partials/Features.jsx';
 import Footer from './partials/Footer.jsx';
 import Hero from './partials/Hero.jsx';
 
 const Home = () => {
+    const [isClient, setIsClient] = useState(false);
+    const [Editor, setEditor] = useState(null);
+
+    useEffect(() => {
+        setIsClient(true);
+        // Dynamically import Editor only on client-side to avoid SSR issues with Konva
+        import('@/modules/editor/editor.jsx').then((module) => {
+            setEditor(() => module.default);
+        });
+    }, []);
+
     return (
         <div className="min-h-[100vh] bg-neutral-50 pb-10 dark:bg-black">
             <div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
-                <Editor />
+                {isClient && Editor ? <Editor /> : (
+                    <div className="h-96 flex items-center justify-center">
+                        <div className="text-muted-foreground">Loading editor...</div>
+                    </div>
+                )}
             </div>
             <div className="space-y-16">
                 <Hero />

vite.config.ts

@@ -39,79 +39,64 @@ export default defineConfig({
     build: {
         rollupOptions: {
             output: {
-                manualChunks: {
-                    // React MUST be first and separate to avoid dependency issues
-                    'react-vendor': ['react', 'react-dom'],
-
-                    // Heavy libraries that can be safely separated
-                    'ffmpeg': ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
-                    'motion': ['motion'],
-                    'canvas': ['konva', 'react-konva', 'react-konva-utils'],
-                    'charts': ['recharts'],
-
-                    // UI libraries that depend on React
-                    'radix-ui': [
-                        '@radix-ui/react-accordion',
-                        '@radix-ui/react-alert-dialog',
-                        '@radix-ui/react-aspect-ratio',
-                        '@radix-ui/react-avatar',
-                        '@radix-ui/react-checkbox',
-                        '@radix-ui/react-collapsible',
-                        '@radix-ui/react-context-menu',
-                        '@radix-ui/react-dialog',
-                        '@radix-ui/react-dropdown-menu',
-                        '@radix-ui/react-hover-card',
-                        '@radix-ui/react-label',
-                        '@radix-ui/react-menubar',
-                        '@radix-ui/react-navigation-menu',
-                        '@radix-ui/react-popover',
-                        '@radix-ui/react-progress',
-                        '@radix-ui/react-radio-group',
-                        '@radix-ui/react-scroll-area',
-                        '@radix-ui/react-select',
-                        '@radix-ui/react-separator',
-                        '@radix-ui/react-slider',
-                        '@radix-ui/react-slot',
-                        '@radix-ui/react-switch',
-                        '@radix-ui/react-tabs',
-                        '@radix-ui/react-toggle',
-                        '@radix-ui/react-toggle-group',
-                        '@radix-ui/react-tooltip'
-                    ],
-
+                manualChunks: (id) => {
+                    // Skip manual chunks for SSR builds to avoid conflicts
+                    if (process.env.NODE_ENV === 'development' && id.includes('ssr')) {
+                        return;
+                    }
+                    
+                    // React core - keep separate and first
+                    if (id.includes('react') || id.includes('react-dom')) {
+                        return 'react-vendor';
+                    }
+                    
+                    // Heavy libraries
+                    if (id.includes('@ffmpeg')) {
+                        return 'ffmpeg';
+                    }
+                    if (id.includes('motion')) {
+                        return 'motion';
+                    }
+                    if (id.includes('konva')) {
+                        return 'canvas';
+                    }
+                    if (id.includes('recharts')) {
+                        return 'charts';
+                    }
+                    
+                    // Radix UI components
+                    if (id.includes('@radix-ui')) {
+                        return 'radix-ui';
+                    }
+                    
                     // Form libraries
-                    'forms': ['react-hook-form', '@hookform/resolvers', 'zod'],
-
+                    if (id.includes('react-hook-form') || id.includes('@hookform') || id.includes('zod')) {
+                        return 'forms';
+                    }
+                    
                     // UI utilities
-                    'ui-utils': [
-                        'tailwind-merge',
-                        'class-variance-authority',
-                        'clsx',
-                        'lucide-react',
-                        'sonner',
-                        'cmdk',
-                        'next-themes'
-                    ],
-
+                    if (id.includes('tailwind-merge') || id.includes('class-variance-authority') || 
+                        id.includes('clsx') || id.includes('lucide-react') || id.includes('sonner') || 
+                        id.includes('cmdk') || id.includes('next-themes')) {
+                        return 'ui-utils';
+                    }
+                    
                     // Other React components
-                    'react-components': [
-                        'react-day-picker',
-                        'react-error-boundary',
-                        'embla-carousel-react',
-                        'react-resizable-panels'
-                    ],
-
+                    if (id.includes('react-day-picker') || id.includes('react-error-boundary') || 
+                        id.includes('embla-carousel-react') || id.includes('react-resizable-panels')) {
+                        return 'react-components';
+                    }
+                    
                     // Non-React utilities
-                    'utils': [
-                        'date-fns',
-                        'axios',
-                        'mitt',
-                        'zustand',
-                        'embla-carousel-autoplay'
-                    ],
-
+                    if (id.includes('date-fns') || id.includes('axios') || id.includes('mitt') || 
+                        id.includes('zustand') || id.includes('embla-carousel-autoplay')) {
+                        return 'utils';
+                    }
+                    
                     // Inertia
-                    'inertia': ['@inertiajs/react']
+                    if (id.includes('@inertiajs')) {
+                        return 'inertia';
+                    }
                 }
             }
         },