[BUG]: TargetCursor server-side rendering error in NextJS project

[aighita]

Describe the issue

TargetCursor component tries to acces window during server-side rendering (SSR). But window is undefined during SSR.

⨯ ReferenceError: window is not defined
    at <unknown> (src\components\TargetCursor.tsx:32:46)
    at TargetCursor (src\components\TargetCursor.tsx:31:27)
  30 |
  31 |   const isMobile = useMemo(() => {
> 32 |     const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
     |                                              ^
  33 |     const isSmallScreen = window.innerWidth <= 768;
  34 |     const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
  35 |     const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i; {
  digest: '2667539285'
}
 GET / 500 in 2.3s (compile: 1453ms, render: 831ms)

Reproduction Link

No response

Steps to reproduce

1. Initialize and Add:

   • npx create-next-app@latest
   • npx shadcn@latest add @react-bits/TargetCursor-TS-TW

2. Update TargetCursor.tsx:
   Since React Bits components often use hooks like useEffect, you must add the client directive:

   + "use client";
   
     import React, { useEffect, useRef, useCallback, useMemo } from 'react';
     import { gsap } from 'gsap';
   

Validations

• I have checked other issues to see if my issue was already reported or addressed

[aighita]

This should fix it during SSR.

const isMobile = useMemo(() => {
+   if (typeof window === 'undefined') return false;
    const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const isSmallScreen = window.innerWidth <= 768;
    const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
    const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;
    const isMobileUserAgent = mobileRegex.test(userAgent.toLowerCase());
    return (hasTouchScreen && isSmallScreen) || isMobileUserAgent;
  }, []);