Sidebar bug in Next.js 14.1.0

[Snarloff]

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"

[azouaoui-med]

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

[Snarloff]

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

Yes! In all components too, but the same error

[RaFeNiX]

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.

[Snarloff]

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[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.

[fchoi1]

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",

[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.

[hiep294]

I use css variables, and this fixed the issues /// css file --sidebar-bg: rgba(255, 255, 255, 0.9); --sidebar-color: #607489; --sidebar-menu-icon: #0098e5; --sidebar-menu-disabled: #9fb6cf;

// jsx file const menuItemStyles: MenuItemStyles = useMemo( () => ({ root: { icon: { color: "var(--sidebar-menu-icon)",

      color: "var(--sidebar-menu-disabled)",
    },
  },
  SubMenuExpandIcon: {
    color: "var(--sidebar-sub-menu-span-icon)",
  },
  ...,
[collapsed]

);