ssr errors mitigation

www/app/[roomName]/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import "@whereby.com/browser-sdk/embed";
 import { useCallback, useEffect, useRef, useState, useContext, RefObject } from "react";
 import { Box, Button, Text, VStack, HStack, Spinner, useToast } from "@chakra-ui/react";
 import useRoomMeeting from "./useRoomMeeting";
@@ -153,7 +152,21 @@ const recordingTypeRequiresConsent = (recordingType: NonNullable<Meeting['record
   return recordingType === 'cloud';
 }
 
+// next throws even with "use client"
+const useWhereby = () => {
+  const [wherebyLoaded, setWherebyLoaded] = useState(false);
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      import("@whereby.com/browser-sdk/embed").then(() => {
+        setWherebyLoaded(true);
+      }).catch(console.error.bind(console));
+    }
+  }, []);
+  return wherebyLoaded;
+}
+
 export default function Room(details: RoomDetails) {
+  const wherebyLoaded = useWhereby();
   const wherebyRef = useRef<HTMLElement>(null);
   const roomName = details.params.roomName;
   const meeting = useRoomMeeting(roomName);
@@ -186,17 +199,10 @@ export default function Room(details: RoomDetails) {
   useEffect(() => {
     if (isLoading || !isAuthenticated || !roomUrl) return;
 
-    // accessibility: whereby grabs focus after its interface is loaded => we lose "esc" and keyboard control over the consent popup
-    const handleReady = (event: any) => {
-      console.log("whereby-embed ready event:", event);
-    };
-
     wherebyRef.current?.addEventListener("leave", handleLeave);
-    wherebyRef.current?.addEventListener("ready", handleReady);
 
     return () => {
       wherebyRef.current?.removeEventListener("leave", handleLeave);
-      wherebyRef.current?.removeEventListener("ready", handleReady);
     };
   }, [handleLeave, roomUrl, isLoading, isAuthenticated]);
 
@@ -224,7 +230,7 @@ export default function Room(details: RoomDetails) {
 
   return (
     <>
-      {roomUrl && meetingId && (
+      {roomUrl && meetingId && wherebyLoaded && (
         <>
           <whereby-embed
             ref={wherebyRef}

www/app/[roomName]/useRoomMeeting.tsx

@@ -49,7 +49,6 @@ const useRoomMeeting = (
       .then((result) => {
         setResponse(result);
         setLoading(false);
-        console.debug("Meeting Loaded:", result);
       })
       .catch((error) => {
         const shouldShowHuman = shouldShowError(error);

www/app/recordingConsentContext.tsx

@@ -36,7 +36,9 @@ export const RecordingConsentProvider: React.FC<RecordingConsentProviderProps> =
 
   const safeWriteToStorage = (meetingIds: string[]): void => {
     try {
-      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(meetingIds));
+      if (typeof window !== 'undefined' && window.localStorage) {
+        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(meetingIds));
+      }
     } catch (error) {
       console.error("Failed to save consent data to localStorage:", error);
     }
@@ -69,6 +71,11 @@ export const RecordingConsentProvider: React.FC<RecordingConsentProviderProps> =
   // initialize on mount
   useEffect(() => {
     try {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        setState({ ready: true, consentAnsweredForMeetings: new Set() });
+        return;
+      }
+
       const stored = localStorage.getItem(LOCAL_STORAGE_KEY);
       if (!stored) {
         setState({ ready: true, consentAnsweredForMeetings: new Set() });