Comments (12)
Thanks for confirming the fix ππΌ Glad to hear it
from react-resizable-panels.
PS thanks for the coffee!
from react-resizable-panels.
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.
from react-resizable-panels.
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>
);
from react-resizable-panels.
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?)
from react-resizable-panels.
Yeah I'm sorry.
I tried to investigate by myself but I couldn't find a solution. Thank you.
from react-resizable-panels.
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
from react-resizable-panels.
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.
from react-resizable-panels.
If I publish a test version of this package, could you verify if this fixes your error?
from react-resizable-panels.
Try [email protected]
and tell me if that fixes your issue?
from react-resizable-panels.
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
from react-resizable-panels.
@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
from react-resizable-panels.
Related Issues (20)
- Example for fixing SSR flicker in NextJS page router HOT 7
- How to change minimum size to collapse the panel HOT 4
- [Example]: Conditional and Collapsible Panels HOT 11
- Can I use conditional rendering with imperative group panel API? HOT 4
- feature request: typed external storage API HOT 1
- onDragging to much calls HOT 3
- Z Index issues HOT 3
- panel seems to get clipped when dragging up HOT 6
- Resizing panel doesn't set the new resize state until clicking on the resize handle (v2.0.0+) HOT 3
- UseLayoutEffect on PanelResizeHandle.ts (SSR) HOT 2
- Tiny layout shift (SSR) HOT 1
- Drag gets priority over overlapping elements HOT 7
- Error: "Failed to execute 'getComputedStyle' on 'Window'" HOT 3
- [Enhancement] Provide "null" storage to avoid persistence in localstorage HOT 1
- Assertion Failed on conditionally rendered panels with size constraints HOT 7
- [FEAT] Snap Points: Predefined sizes to get snapped to. HOT 1
- Panel becomes unresizable after a certain vertical position in the page HOT 4
- PanelGroup different height with collapsed children HOT 2
- Global cursor style persists if PanelResizeHandle is disabled while dragging HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-resizable-panels.