Using masonic in nextjs

[Lantianyou]

According to this reddit page, seems quite a lots of hook will cause issuse using nextjs, and there is no work around. https://www.reddit.com/r/nextjs/comments/1bhfikg/window_is_not_defined_error_in_nextjs_14_app/

[Lantianyou]

In my case

ReferenceError: ResizeObserver is not defined
    at useResizeObserver (components/ui/useResizeObserver.ts:11:4)
    at Masonry (components/ui/masonry.tsx:103:47)
   9 |   const [forceUpdate] = useForceUpdate()
  10 |   const resizeObserver = createResizeObserver(
> 11 |     positioner,

[jaredLunde]

It doesn't make sense to render this component on the server. Simply put, it needs a browser window.

#123

[Lantianyou]

Yes, sure, the component throws an error anyway despite using "use client" directive. Cause all client component code are still run in ssr. As per the reddit post

[jaredLunde]

Use a dynamic import

[Lantianyou]

I understand, but dynamic import only work for component, not for hooks. So for hooks like useResizeObserver, still will throw error on server side

[jaredLunde]

Ponyfill it? Dynamically import the component using the resize observer hook? Use a framework that isn't Next.js? Many options available

[Lantianyou]

Understood it. Also appreciate your answer. Just here to state the problem, it will cause error in nextjs server. Guess one day nextjs will fix it.

[biowaffeln]

You can wrap it in a ClientOnly component to make sure it's doesn't run during SSR. Here's one from remix-utils, should probably work in Next.js as well:
https://github.com/sergiodxa/remix-utils/blob/main/src/react/client-only.tsx