Sidebar bug in Next.js 14.1.0

[Luís Estareli]

Hello!

I have a bug in the package using it in Next.js version 14. The bug is that when entering the mobile device, the sidebar should start closed since it is responsive. However, as shown in the image, it starts open, not being responsive. I ran the sidebar by taking Playgroud.tsx and putting it in a Next project.

Screenshots

Running on

Windows 11
Next.js 14.1.0
Components declares with "use client"

I carried out the same test with Vite and it ran normally, being responsive.

Warning: Prop `className` did not match. Server: "ps-sidebar-root text-default-500 h-screen css-1rwe39e" Client: "ps-sidebar-root ps-broken text-default-500 h-screen css-1rwe39e"

[Mohamed Azouaoui]

have you tried adding 'use client' to the sidebar wrapper ?!

[Luís Estareli]

have you tried adding 'use client' to the sidebar wrapper ?!

Yes! In all components too, but the same error

[Rafael Jacomini]

Could you replicate this out of the Playground @Snarloff ?
I Have had some issues with The playground on the past. Maybe something related to config as Next 14 brings up some big changes over settings.

[Luís Estareli]

Could you replicate this out of the Playground @Snarloff ? I Have had some issues with The playground on the past. Maybe something related to config as Next 14 brings up some big changes over settings.

I replicated it in Playground and in my normal code and it gives this error :/

[jweekley7]

I having this issue too. Anyone made any progress yet?

[jweekley7]

This has something to do with the breakpoint. This is my workaround

[stale]

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.

[Fab]

A better workaround is to check for component mount since there is a mismatch in the classname for broken sidebar
since the useEffect is done on client side render

  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

   return (mounted && (
      <Sidebar> .... <Sidebar/>))

[Yugi-2]

The "mounted" workaround was not preferable to me as there's an awkward second before the sidebar loads in. Instead I used CSS media queries to hide the sidebar on initial load when it is less than the breakpoint width

[pavel-vorobev-quantumsoft]

Same here. It falls into hydration issue:

Warning: Prop `className` did not match. Server: "ps-sidebar-root ps-rtl css-1jlhf24" Client: "ps-sidebar-root ps-broken ps-rtl css-1jlhf24"

It's also visible all the way without backdrop regardless of collapsed prop value.

"react-pro-sidebar": "^1.1.0",
"react": "^18",
"next": "14.2.2",