diff --git a/resources/js/pages/home/home.tsx b/resources/js/pages/home/home.tsx
index 7936a70..6fb4e10 100644
--- a/resources/js/pages/home/home.tsx
+++ b/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 (
-
+ {isClient && Editor ?
: (
+
+ )}
diff --git a/vite.config.ts b/vite.config.ts
index 5659e26..7cbe98c 100644
--- a/vite.config.ts
+++ b/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';
+ }
}
}
},