fix(component): Check for window in components

src/lib/components/Carousel/index.tsx

@@ -15,6 +15,7 @@ import {
 import classNames from 'classnames';
 import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi';
 import ScrollContainer from 'react-indiana-drag-scroll';
+import windowExists from '../../helpers/window-exists';
 
 export type CarouselProps = PropsWithChildren<{
   slide?: boolean;
@@ -35,7 +36,7 @@ export const Carousel: FC<CarouselProps> = ({
   const [activeItem, setActiveItem] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
   const carouselContainer = useRef<HTMLDivElement>(null);
-  const isDeviceMobile = typeof window.orientation !== 'undefined' || navigator.userAgent.indexOf('IEMobile') !== -1;
+  const isDeviceMobile = windowExists() && navigator.userAgent.indexOf('IEMobile') !== -1;
 
   const items = useMemo(
     () =>

src/lib/components/Flowbite/ThemeContext.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { FC, ReactNode, createContext, useContext, useState, useEffect } from 'react';
+import windowExists from '../../helpers/window-exists';
 import defaultTheme from '../../theme/default';
 
 export type Mode = string | undefined | 'light' | 'dark';
@@ -36,16 +37,22 @@ export const useThemeMode = (
   const savePreference = (m: string) => localStorage.setItem('theme', m);
 
   const toggleMode = () => {
-    if (!mode) return;
+    if (!mode) {
+      return;
+    }
+
+    if (windowExists()) {
+      document.documentElement.classList.toggle('dark');
+    }
 
-    document.documentElement.classList.toggle('dark');
     savePreference(mode);
     setMode(mode == 'dark' ? 'light' : 'dark');
   };
 
   if (usePreferences) {
     useEffect(() => {
-      const userPreference = !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const userPreference =
+        windowExists() && !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
       const userMode = localStorage.getItem('theme') || (userPreference ? 'dark' : 'light');
 
       if (userMode) {
@@ -54,10 +61,16 @@ export const useThemeMode = (
     }, []);
 
     useEffect(() => {
-      if (!mode) return;
+      if (!mode) {
+        return;
+      }
 
       savePreference(mode);
 
+      if (!windowExists()) {
+        return;
+      }
+
       if (mode != 'dark') {
         document.documentElement.classList.remove('dark');
       } else {

src/lib/components/Flowbite/index.tsx

@@ -2,6 +2,7 @@ import { FC, HTMLAttributes, useLayoutEffect, useMemo } from 'react';
 import { ThemeContext, useThemeMode } from './ThemeContext';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import defaultTheme from '../../theme/default';
+import windowExists from '../../helpers/window-exists';
 
 export interface ThemeProps {
   config?: object;
@@ -25,7 +26,10 @@ export const Flowbite: FC<FlowbiteProps> = ({ children, theme = {} }) => {
       if (setMode != null) {
         setMode('dark');
       }
-      document.documentElement.classList.add('dark');
+
+      if (windowExists()) {
+        document.documentElement.classList.add('dark');
+      }
     }
   }, [dark, setMode]);
 

src/lib/components/Modal/index.tsx

@@ -6,6 +6,7 @@ import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
 import { ModalFooter } from './ModalFooter';
 import { ModalContext } from './ModalContext';
+import windowExists from '../../helpers/window-exists';
 
 type Size = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
 type Placement = `${'top' | 'bottom'}-${'left' | 'center' | 'right'}` | `center${'' | '-left' | '-right'}`;
@@ -46,17 +47,19 @@ const placementClasses: Record<Placement, string> = {
 
 const ModalComponent: FC<ModalProps> = ({
   children,
-  root = document.body,
+  root = windowExists() ? document.body : undefined,
   show,
   popup,
   size = '2xl',
   placement = 'center',
   onClose,
 }): JSX.Element | null => {
-  const [container] = useState<HTMLDivElement>(document.createElement('div'));
+  const [container] = useState<HTMLDivElement | undefined>(windowExists() ? document.createElement('div') : undefined);
 
   useEffect(() => {
-    if (!show) return;
+    if (!container || !root || !show) {
+      return;
+    }
 
     root.appendChild(container);
 
@@ -65,27 +68,29 @@ const ModalComponent: FC<ModalProps> = ({
     };
   }, [container, root, show]);
 
-  return createPortal(
-    <ModalContext.Provider value={{ popup, onClose }}>
-      <div
-        aria-hidden={!show}
-        className={classNames(
-          'fixed top-0 right-0 left-0 z-50 h-modal overflow-y-auto overflow-x-hidden md:inset-0 md:h-full',
-          placementClasses[placement],
-          {
-            'flex bg-gray-900 bg-opacity-50 dark:bg-opacity-80': show,
-            hidden: !show,
-          },
-        )}
-        data-testid="modal"
-      >
-        <div className={classNames('relative h-full w-full p-4 md:h-auto', sizeClasses[size])}>
-          <div className="relative rounded-lg bg-white shadow dark:bg-gray-700">{children}</div>
-        </div>
-      </div>
-    </ModalContext.Provider>,
-    container,
-  );
+  return container
+    ? createPortal(
+        <ModalContext.Provider value={{ popup, onClose }}>
+          <div
+            aria-hidden={!show}
+            className={classNames(
+              'fixed top-0 right-0 left-0 z-50 h-modal overflow-y-auto overflow-x-hidden md:inset-0 md:h-full',
+              placementClasses[placement],
+              {
+                'flex bg-gray-900 bg-opacity-50 dark:bg-opacity-80': show,
+                hidden: !show,
+              },
+            )}
+            data-testid="modal"
+          >
+            <div className={classNames('relative h-full w-full p-4 md:h-auto', sizeClasses[size])}>
+              <div className="relative rounded-lg bg-white shadow dark:bg-gray-700">{children}</div>
+            </div>
+          </div>
+        </ModalContext.Provider>,
+        container,
+      )
+    : null;
 };
 
 ModalComponent.displayName = 'Modal';

src/lib/helpers/window-exists.ts

@@ -0,0 +1 @@
+export default (): boolean => typeof window !== 'undefined';