test 4

AlexVOiceover · AlexVOiceover · commit 5cd2f21ed3e8 · 2025-03-11T13:06:44.000Z
diff --git a/index.html b/index.html
@@ -4,13 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Beacons</title>
-    <!-- Prevent "useLayoutEffect does nothing on the server" warning -->
+    <!-- Fix for React hooks in server environments -->
     <script>
-      // Polyfill useLayoutEffect for environments that don't support it (like Deno Deploy)
-      if (typeof window !== 'undefined') {
-        window.React = window.React || {};
-        window.React.useLayoutEffect = window.React.useEffect || function() { return function() {}; };
-      }
+      // This needs to run before React is loaded, so React will use these implementations
+      window.__REACT_WORKAROUND__ = true;
+      window.requestAnimationFrame = function(cb) { setTimeout(cb, 0); };
     </script>
   </head>
   <body>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React, { useEffect } from './lib/utils/react-safe';
 import { TooltipProvider } from '@radix-ui/react-tooltip';
 
 // Providers
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from '../../lib/utils/react-safe';
 import { Slot } from '@radix-ui/react-slot';
 import type { VariantProps } from 'class-variance-authority';
 
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from 'react';
+import * as React from '../../lib/utils/react-safe';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 import { cn } from '@/lib/utils';
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from '../../lib/utils/react-safe';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { cn } from '@/lib/utils';
 
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from 'react';
+import * as React from '../../lib/utils/react-safe';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
 
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from 'react';
+import * as React from '../../lib/utils/react-safe';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 import { cn } from '@/lib/utils';
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from 'react';
+import * as React from '../../lib/utils/react-safe';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 import { cn } from '@/lib/utils';
diff --git a/src/lib/utils/react-safe.ts b/src/lib/utils/react-safe.ts
@@ -0,0 +1,13 @@
+/**
+ * This file provides safe React hooks that work in both client and server environments.
+ * Import these hooks instead of directly importing from React when SSR compatibility is needed.
+ */
+import React, { useEffect, useLayoutEffect } from 'react';
+
+// Use a safe version of useLayoutEffect that falls back to useEffect in non-browser environments
+export const useIsomorphicLayoutEffect = 
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+// Re-export React to ensure consistent usage
+export default React;
+export * from 'react';
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,4 @@
-import { StrictMode } from 'react';
+import { StrictMode } from './lib/utils/react-safe';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App'; // Now your App component is the top-level one

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import * as React from 'react';`
	`1`	`+import * as React from '../../lib/utils/react-safe';`
`2`	`2`	`import { Slot } from '@radix-ui/react-slot';`
`3`	`3`	`import type { VariantProps } from 'class-variance-authority';`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { StrictMode } from 'react';`
	`1`	`+import { StrictMode } from './lib/utils/react-safe';`
`2`	`2`	`import { createRoot } from 'react-dom/client';`
`3`	`3`	`import './index.css';`
`4`	`4`	`import App from './App'; // Now your App component is the top-level one`