test6

Author: AlexVOiceover

src/layouts/components/Header.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { useEntries } from '../../features/statements/hooks/useEntries';
 import { Dialog, DialogTrigger } from '../../components/ui/dialog';
 import SmallCircularQuestionCounter from '../../components/ui/questionCounter/smallCircularQuestionCounter';
-// import UserDataModal from '../../components/modals/UserDataModal';
+import UserDataModal from '../../components/modals/UserDataModal';
 
 const Header: React.FC = () => {
   const { data } = useEntries();
@@ -39,9 +39,9 @@ const Header: React.FC = () => {
                       <SmallCircularQuestionCounter size={18} />
                     </button>
                   </DialogTrigger>
-                  {/* <UserDataModal
+                  <UserDataModal
                     onOpenChange={setIsDashboardOpen}
-                  /> */}
+                  />
                 </Dialog>
               ) : (
                 <div className='flex shrink-0 items-center border-2 border-white rounded-full px-2 py-1 sm:px-4 sm:py-2 cursor-default'>
@@ -71,7 +71,7 @@ const Header: React.FC = () => {
                     <SmallCircularQuestionCounter size={18} />
                   </button>
                 </DialogTrigger>
-                {/* <UserDataModal onOpenChange={setIsDashboardOpen} /> */}
+                <UserDataModal onOpenChange={setIsDashboardOpen} />
               </Dialog>
             ) : (
               <div className='flex shrink-0 items-center border-2 border-white rounded-full px-2 py-1 sm:px-4 sm:py-2 cursor-default'>

src/lib/utils/react-polyfill.ts

@@ -0,0 +1,21 @@
+/**
+ * React polyfill to handle useLayoutEffect issues in server-side rendering
+ * This fixes the "Cannot read properties of undefined (reading 'useLayoutEffect')" error
+ */
+
+// This is a side-effect module that makes sure React.useLayoutEffect is available
+// in environments where it might not be (like SSR or certain build environments)
+if (typeof window !== 'undefined') {
+  // We're in the browser, so we can safely create a React object on window
+  // This ensures that libraries that expect to find React on window won't break
+  // @ts-ignore - intentionally modifying window
+  window.React = window.React || {};
+  // @ts-ignore - intentionally modifying window.React
+  window.React.useLayoutEffect = window.React.useLayoutEffect || function() { return function() {}; };
+}
+
+// Export a dummy function to make TypeScript happy when importing this module
+export default function ensureReactPolyfill() {
+  // This function does nothing, it just ensures the side effects above are executed
+  return true;
+}

src/main.tsx

@@ -1,8 +1,5 @@
-// Apply React useLayoutEffect polyfill
-if (typeof window !== 'undefined') {
-  window.React = window.React || {};
-  window.React.useLayoutEffect = window.React.useEffect || function() { return function() {}; };
-}
+// Import the polyfill first, before any other imports
+import './lib/utils/react-polyfill';
 
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';

vite.config.ts

@@ -2,9 +2,26 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
+// This ensures the polyfill is always included early in the bundle
+const polyfillPlugin = {
+  name: 'react-polyfill',
+  enforce: 'pre' as const,
+  transform(code: string, id: string) {
+    // Only add to entry point
+    if (id.includes('main.tsx')) {
+      // Make sure the polyfill import is at the top
+      const hasPolyfill = code.includes("import './lib/utils/react-polyfill'");
+      if (!hasPolyfill) {
+        return `import './lib/utils/react-polyfill';\n${code}`;
+      }
+    }
+    return code;
+  }
+};
+
 export default defineConfig({
   base: '/',
-  plugins: [react()],
+  plugins: [polyfillPlugin, react()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
@@ -24,7 +41,8 @@ export default defineConfig({
             // Split React and related packages into a separate chunk
             if (id.includes('react') || 
                 id.includes('scheduler') || 
-                id.includes('prop-types')) {
+                id.includes('prop-types') ||
+                id.includes('src/lib/utils/react-polyfill')) {
               return 'vendor-react';
             }