react-resizable-panels icon indicating copy to clipboard operation
react-resizable-panels copied to clipboard

Published 20 hours ago • verified publisher icon bvaughn

How to use this in NextJS

Open gj1118 opened this issue 2 years ago • 1 comments

Hi, This looks mighty impressive. However, when I try to use in NextJs, I am seeing the error message "document is not defined".

When I try dynamic importing it, the linter throws me this error

image

Thanks

gj1118 avatar Dec 25 '22 14:12 gj1118

Can you share a repro with me (for the error)?

A link to a repository with instructions on how to run would be fine.

bvaughn avatar Dec 25 '22 17:12 bvaughn 

const PanelGroup = dynamic(() => import('react-resizable-panels').then(({ PanelGroup }) => PanelGroup))
const Panel = dynamic(() => import('react-resizable-panels').then(({ Panel }) => Panel))

SCG82 avatar Dec 26 '22 03:12 SCG82

Looks like there are some issues with server rendered auto-generated ids matching client-rendered ones. I think the new useId hook might be able to help here but I need to look.

bvaughn avatar Dec 26 '22 13:12 bvaughn

I think the most straight-forward fix here is to use useId for groups, panels, and resize handles if it's available and then just require user-injected ids for older versions of React. I think I have a pattern that works pretty well here now based on my local testing.

bvaughn avatar Dec 26 '22 14:12 bvaughn

So far asI can tell, PR #22 resolves this issue. (You didn't provide a runnable repro so I'm guessing a bit after making my own Next JS app to test.)

Fix released in v0.0.13

bvaughn avatar Dec 26 '22 14:12 bvaughn