From ba8abd4b0531001e34bfcf7c72a874fde103bb4b Mon Sep 17 00:00:00 2001
From: Inkithai <108919130+Inkithai@users.noreply.github.com>
Date: Sun, 26 Jul 2026 01:49:09 +0000
Subject: [PATCH] Fix Vite React dependency optimization

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 frontend/vite.config.js | 44 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 60d573e..4bf3a45 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -6,14 +6,48 @@ import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+const fromNodeModules = (...segments) => path.resolve(__dirname, 'node_modules', ...segments);
+
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   resolve: {
-    alias: {
-      react: path.resolve(__dirname, 'node_modules/react'),
-      'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
-    },
-    dedupe: ['react', 'react-dom']
+    alias: [
+      // Keep every React entrypoint on the same physical package. This prevents
+      // Vite's dependency optimizer from serving mixed React instances after it
+      // discovers new deps during development, which causes "Invalid hook call".
+      { find: /^react$/, replacement: fromNodeModules('react', 'index.js') },
+      { find: /^react\/jsx-runtime$/, replacement: fromNodeModules('react', 'jsx-runtime.js') },
+      { find: /^react\/jsx-dev-runtime$/, replacement: fromNodeModules('react', 'jsx-dev-runtime.js') },
+      { find: /^react-dom$/, replacement: fromNodeModules('react-dom', 'index.js') },
+      { find: /^react-dom\/client$/, replacement: fromNodeModules('react-dom', 'client.js') }
+    ],
+    dedupe: [
+      'react',
+      'react/jsx-runtime',
+      'react/jsx-dev-runtime',
+      'react-dom',
+      'react-dom/client',
+      'react-router',
+      'react-router-dom'
+    ]
+  },
+  optimizeDeps: {
+    entries: ['index.html', 'src/**/*.{js,jsx,ts,tsx}'],
+    include: [
+      'axios',
+      'i18next',
+      'leaflet',
+      'lucide-react',
+      'react',
+      'react/jsx-runtime',
+      'react/jsx-dev-runtime',
+      'react-dom',
+      'react-dom/client',
+      'react-i18next',
+      'react-leaflet',
+      'react-router-dom',
+      'socket.io-client'
+    ]
   },
   server: {
     port: 5173,