How to use this in NextJS

[gj1118]

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

Thanks

[bvaughn]

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

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

[SCG82]

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

[bvaughn]

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]

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]

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