Your initial state tries to access the window object, useState<number>(window.innerWidth);. This hook may be running in your server side code, hence the error. Initalize it with 0, or something else that suits your use case

export const useWindowSize = () => {
    const [windowSize, setWindowSize] = useState(0);

    useEffect(() => {
        // inside useEffect, the window is always present
        const updateWindowSize = () => {
            setWindowSize(window.innerWidth);
        };

        updateWindowSize(); // as soon as we are on the client, run this handler

        window.addEventListener('resize', updateWindowSize); // works only on resize events

        return () => {
            window.removeEventListener('resize', updateWindowSize); // clean up
        };
    }, []); // attach this once

    return windowSize;
};

AGAIN. he said to initiliaze with 0. Works for me. Make sure you set state of windowSize inside useEffect()

The issue was because the leaflet library was using SSR instead of client, resulting in the error 'window is not defined'. I solved this by importing dynamic from nextjs. Please see the below screenshot

https://prnt.sc/RWuE55T6skuA