data-panel-size did not match. Server: "null" Client: number

[ontech7]

Why do I keep getting this?

I'm using shadcn/ui Resizable component, version 2.0.7, with Next.js 14.1 and Page routes.

[bvaughn]

I'm using shadcn/ui Resizable component, version 2.0.7, with Next.js 14.1 and Page routes.

I don't know about or support those components, sorry.

Try adding a defaultSize value to the panel.

[ontech7]

Yeah I understand that you don't know or support those components, but the issue comes from PanelWithForwardedRef, and you can see that is called from "react-resizable-panel" package.

I was already using defaultSize, as you can see

Shadcn/ui components are just the same components but with different styles.

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean;
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-slate-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 dark:bg-slate-800 dark:focus-visible:ring-slate-300",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-slate-200 bg-slate-200 dark:border-slate-800 dark:bg-slate-800">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
);

[bvaughn]

The original bug report had barely any info. A screenshot of a console message, with no code or link to a runnable reproduction of the bug, is not really something that anyone could help with.

Please understand that, as a maintainer of free software like this, each bug report takes time to investigate. If there isn't even enough information provided to see the bug happen then the chance of identifying the problem is really low. (Maybe another way of thinking about it is– how would you investigate a bug report like this?)

[ontech7]

Yeah I'm sorry.

I tried to investigate by myself but I couldn't find a solution. Thank you.

[ontech7]

It's something about react-resizable-panels/packages/react-resizable-panels/src/Panel.ts row: 253

"data-panel-collapsible": isDevelopment
      ? collapsible || undefined
      : undefined,
"data-panel-size": isDevelopment
      ? parseFloat("" + style.flexGrow).toFixed(1)
      : undefined,
        ^^^^^^^^^

When running npm run dev in Next.js 14.1, I get in the second condition, and I receive the error I printed in the first comment (Server null, Client "30.0"). If I build with npm run build and I start the server npm run start the error doesn't appear.

I suppose that "isDevelopment" flag is because in dev server there is the hot reload

[bvaughn]

Huh, that is interesting. So the isDevelopment flag isn't matching between server and client or something?

I guess I could remove the isDevelopment gate on these data attributes. I don't think there's really any harm on doing that.

[bvaughn]

If I publish a test version of this package, could you verify if this fixes your error?

[bvaughn]

Try react-resizable-panels@2.0.8-rc.1 and tell me if that fixes your issue?

[bvaughn]

I have limited time and I'd like to get the fix from 299 into a release as well so I'm going to publish this change in 2.0.8. I hope it fixes the issue you reported.

---

❤️ → ☕ givebrian.coffee

[ontech7]

@bvaughn Hello man, sorry for the dalyed response, I finished working and forgot to open GitHub, my bad.

The problem is solved with 2.0.8-rc.1 version

I'll send you a coffee for the fix and time dedicated to me! :D

[bvaughn]

Thanks for confirming the fix 👏🏼 Glad to hear it

[bvaughn]

PS thanks for the coffee!