feature/IO-3499-React-19 -Checkpoint

client/vite.config.js

@@ -52,7 +52,7 @@ export default defineConfig(({ command, mode }) => {
 
   const enableReactCompiler =
     (isBuild && (mode === "production" || isTestBuild)) || // Always enable for prod/test builds
-    process.env?.VITE_DISABLE_COMPILER_IN_DEV !== "true";  // In dev, enable unless explicitly disabled
+    process.env?.VITE_DISABLE_COMPILER_IN_DEV !== "true"; // In dev, enable unless explicitly disabled
 
   logger.info(
     enableReactCompiler ? chalk.green.bold("React Compiler enabled") : chalk.yellow.bold("React Compiler disabled")
@@ -60,6 +60,13 @@ export default defineConfig(({ command, mode }) => {
 
   return {
     base: "/",
+    resolve: {
+      dedupe: ["styled-components", "react", "react-dom"],
+      alias: {
+        // Force all styled-components imports to resolve to the same location
+        'styled-components': './node_modules/styled-components/dist/styled-components.browser.esm.js'
+      }
+    },
     plugins: [
       ViteEjsPlugin((viteConfig) => ({ env: viteConfig.env })),
 
@@ -268,11 +275,14 @@ export default defineConfig(({ command, mode }) => {
         "@firebase/firestore",
         "@firebase/auth",
         "@firebase/messaging",
-        "@firebase/util"
+        "@firebase/util",
+        "styled-components"
       ],
       esbuildOptions: {
         loader: { ".jsx": "jsx", ".tsx": "tsx" }
-      }
+      },
+      // Force styled-components to be pre-bundled and deduplicated
+      force: mode === 'development'
     },
 
     css: {