Closed GuasaPlay closed 10 months ago
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
https://github.com/azouaoui-med/react-pro-sidebar/issues/176
Report on my issue seems very close probably will be resolved in same manner
+1
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});
Hey! Here's my quick workaround:
<Sidebar breakPoint={typeof window !== 'undefined' ? 'md' : undefined} >...</Sidebar>
here is my quick workaround
import dynamic from 'next/dynamic'; const NonSSRMobile = dynamic(() => import('../main-sidebar/mobile.sidebar'), { ssr: false, });
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 .
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.
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 thetoggled
property so that the sidebar is always hidden, then when using these properties I get shows the following errorThis is the component where all the react pro sidebar code is
Expected behavior A clear and concise description of what you expected to happen.
Screenshots This is the error it shows on the console![image](https://github.com/azouaoui-med/react-pro-sidebar/assets/45466316/ccb0a0aa-ce8f-4e57-8f8a-ae155bbce63e)
**Desktop
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?