"window is not defined" when use breakPoint and toggled props in Next 13 App Directory

[GuasaPlay]

Describe the bug I am using react pro sidebar in a Next 13 project with the App Directory, everything was going fine, until I used the breakPoint property together with the toggled property so that the sidebar is always hidden, then when using these properties I get shows the following error

error node_modules\react-pro-sidebar\dist\index.js (2879:0) @ useMediaQuery
error ReferenceError: window is not defined

This is the component where all the react pro sidebar code is

'use client';

import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { useState } from 'react';

export const SidebarPro = () => {
    const [toggled, setToggled] = useState(false);

    return (
        <>
            <div style={{ display: 'flex', height: '100%' }}>
                <Sidebar
                    onBackdropClick={() => setToggled(false)}
                    toggled={toggled}
                    breakPoint="all"
                    backgroundColor="rgb(255, 255, 255)"
                    transitionDuration={500}
                >
                    <Menu transitionDuration={500}>
                        <MenuItem onClick={() => setToggled(false)}>Documentation</MenuItem>
                        <MenuItem>Calendar</MenuItem>
                        <MenuItem>E-commerce</MenuItem>
                        <MenuItem>Examples</MenuItem>
                    </Menu>
                </Sidebar>
            </div>

            <nav>
                <div>
                    <button className="sb-button" onClick={() => setToggled(!toggled)}>
                        Toggle
                    </button>
                </div>
            </nav>
        </>
    );
};

Expected behavior A clear and concise description of what you expected to happen.

Screenshots This is the error it shows on the console

**Desktop

• OS: Windows 11
• Browser chrome
• Next.js version: 13.4.4
• react-pro-sidebar version: 1.1.0-alpha.1

Additional context I guess this error is because Next tries to statically generate the components on the server and when react pro sidebar gets browser window size it gets null as it can't find window

I don't know how to fix it, any suggestions?

[Digitl-Alchemyst]

Following I was unable to deploy my project to vercel or build in general with this issue, My issue is a little different but relates to the same problem of sidebar trying to render on the server in an undefined window, aside from that everything worked fine. I will throw up a bug report in here as well and update if i find a fix or a hack

[Digitl-Alchemyst]

https://github.com/azouaoui-med/react-pro-sidebar/issues/176

Report on my issue seems very close probably will be resolved in same manner

[JonJoyce]

+1

[ace113]

I just wanted to share how I managed to solve the issue, hoping it might be helpful for others encountering a similar problem.

import dynamic from 'next/dynamic';

const ProSidebar = dynamic(() => import('./Components/ProSidebar'), {ssr: false});

[arturkarczmarczyk]

Hey! Here's my quick workaround:

<Sidebar breakPoint={typeof window !== 'undefined' ? 'md' : undefined} >...</Sidebar>

[tarifalhasan]

here is my quick workaround

import dynamic from 'next/dynamic'; const NonSSRMobile = dynamic(() => import('../main-sidebar/mobile.sidebar'), { ssr: false, });

[qaws5503]

Since this looks like an issue with SSR, so just disable it will solve it. The Next.js document mentions that there are two ways to disable SSR. 1. dynamic or lazy import 2. use useEffect. The first one can be achieved by @ace113 @tarifalhasan solution. But since it needs to extract the entire code to a new file it's a bit annoying to me. So here is my solution:

const [isReady, setReady] = useState(false);
useEffect(() => {
  if (typeof window !== "undefined") {
    setReady(true);
  }
}, []);
if (!isReady) return null;

return <Sidebar>...</Sidebar>

Since this is a workaround. I'm still waiting for a bug fix from @azouaoui-med .

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.