Resize broken in 4.8+ on Vite dev / React Router SSR (panels keep flex-basis from defaultSize)

[olegp]

I'm hitting a regression on resize where panels visibly stop resizing while the
library's internal state still updates. Reproduces on 4.10.0 and 4.11.0.
Pinning to 4.7.6 makes it work again. I haven't bisected 4.8.0/4.9.0
individually.

Setup

• Vite 7 dev server with React Router 7 SSR (@react-router/dev)
• React 19.2
• Three panels (<Panel defaultSize="15%" />, <Panel defaultSize="55%" />,
  <Panel defaultSize="30%" />) with two <Separator>s between them.
• useDefaultLayout({ id: "tables", storage: localStorage }) on the <Group>.

Expected

After hydration, each Panel renders with flex: <size> 1 0px. Dragging a
separator updates these flex values and panels visibly resize.

Actual

After SSR (introduced in #696), each Panel server-renders with
flex-basis: <defaultSize>. After hydration in our setup the Panel never
re-renders to drop flex-basis and pick up flex-grow: <size>. Dragging a
separator does update the library's state (aria-valuenow changes,
flex-grow: <new size> is written on the panel), but flex-basis: 15% /
55% / 30% stays. Since the basis values sum to 100%, the browser honors
basis and ignores grow, so panels look frozen.

DOM snapshot

Working (production build, 4.7.6):

style="...; display: flex; flex: 15 1 0px; overflow: visible;"

Broken (Vite dev, 4.10.0):

style="...display:flex;flex-basis:15%;overflow:visible"

After dragging in 4.10:

style="...display:flex;flex-basis:15%;overflow:visible;flex-grow:30.828"

(Notice both flex-basis: 15% and flex-grow: 30.828 are set, which gives
no visible resize.)

The same code in a production build (Vite + Rollup) on 4.7.6 doesn't exhibit
the issue: the post-hydration render correctly drops flex-basis and the
panels show flex: <size> 1 0px. So this may be specific to dev-mode SSR /
hydration timing rather than a pure rendering bug.

Version range

• 4.7.6: works
• 4.10.0, 4.11.0: confirmed broken in our setup
• 4.7.5, 4.8.0, 4.9.0: not tested but presumed affected since Improved server rendering support for defaultSize prop #696 shipped in
  4.7.5

[olegp]

Closing — this was a false positive on my end.

The bisect to 4.7.6 was contaminated by stale state. After re-testing 4.10.0 with node_modules/.vite/deps cleared and localStorage["react-resizable-panels:tables"] removed, the post-hydration flip works correctly: panels render flex: <size> 1 0px and dragging updates widths visibly. The original "4.7.6 works, 4.8+ broken" pattern was an artifact of Vite serving a cached pre-bundled module + a stale saved layout from a previous session, not an actual regression in #696's hydration path.

For future readers hitting similar symptoms: clear node_modules/.vite/deps and the saved-layout localStorage key between version bumps, otherwise the bisect is unreliable.

Sorry for the noise.

[bvaughn]

Thanks for the update!

…

On Tue, May 5, 2026 at 10:12 AM Oleg Podsechin ***@***.***> wrote: Closed #714 <#714> as completed. — Reply to this email directly, view it on GitHub <#714 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAHHHK7M5IG7WYSESYUD4T4ZHZFRAVCNFSM6AAAAACYRFT43CVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMRVGE3TSNZZHEZDINY> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you are subscribed to this thread.Message ID: <bvaughn/react-resizable-panels/issue/714/issue_event/25179799247@ github.com>

[olegp]

Reopening — the false-positive closure was wrong. Clearing cache + localStorage made the symptom go away because it deleted the saved layout from a prior session, not because there was no bug.

Setup: Vite 7 dev SSR + React Router 7 + react-resizable-panels@4.10.0, three Panels with useDefaultLayout({ id, storage: localStorage }), saved layout present in localStorage.

Inline styles after reload:

sidebar:  flex-basis: 15%   flex-grow: 27.486
data:     flex-basis: 55%   flex-grow: 34.987
chat:     flex-basis: 30%   (no flex-grow at all)

Server-rendered flex-basis from defaultSize is never cleared on hydration. flex-grow from the saved layout is written to the non-final panels but not the final one. Basis values sum to 100% so the browser honors them and ignores grow — the panels look frozen even though aria-valuenow updates correctly on drag.

Confirmation that it's the SSR/hydration path specifically: client-side nav away and back to the same route — full unmount/remount, no SSR — renders cleanly with flex: <size> 1 0px and dragging works from the first frame.

Workaround we're shipping: wrap <Group> in a ClientOnly that returns null on the server and mounts the panel tree only after useSyncExternalStore flips. Sidesteps hydration entirely.

[bvaughn]

Thanks for the extra info, @olegp. Any chance you were able to narrow the regression down to 4.8 vs 4.9? or could share a runnable repro with me?

I can't reproduce the behavior you're describing using either Next, Vike, or Vite in my local test harnesses.

[bvaughn]

Server-rendered flex-basis from defaultSize is never cleared on hydration.

That sounds unexpected to me, given the lines below. Once the panels and group have mounted, the group's computed styles should kick in and override the temporary flex-basis used on mount:

react-resizable-panels/lib/components/panel/Panel.tsx

Lines 155 to 166 in 85714d9

	let panelStyles: CSSProperties;
	if (panelStylesString) {
	panelStyles = JSON.parse(panelStylesString);
	} else if (defaultSize) {
	panelStyles = {
	flexGrow: undefined,
	flexShrink: undefined,
	flexBasis: defaultSize
	};
	} else {
	panelStyles = { flexGrow: 1 };
	}

And a default flex-basis style of 0 should be applied instead.

react-resizable-panels/lib/components/panel/Panel.tsx

Lines 179 to 184 in 85714d9

	display: "flex",
	flexBasis: 0,
	flexShrink: 1,
	overflow: "visible",
	...panelStyles

That's also what I'm seeing when running Vike, Vite, and Next test harnesses locally.

Note

You can run these test harnesses yourself if you'd like by checking out this project and then running...

pnpm install
pnpm prerelease
pnpm dev:integrations

Next will run on localhost:3010, Vike on localhost:3011, and Vite on localhost:3012.

Workaround we're shipping: wrap <Group> in a ClientOnly that returns null on the server and mounts the panel tree only after useSyncExternalStore flips. Sidesteps hydration entirely.

That's fair but also kills much of the benefit of server-rendering, so it would be nice to figure out how to resolve it.