Error: ResizeObserver is not defined

[jackkemmish]

Hi there, I am trying to use this package within Next.js 14.

In dev mode, I am getting Error: ResizeObserver is not defined, and then build it errors with the same issue.

Has anyone had this before?

I am using the minimal example:

<Masonry
  items={items}
  render={MasonryCard}
  maxColumnCount={4}
  columnGutter={20}
  rowGutter={20}
  overscanBy={5}
/>

Thanks,
Jack

[jackkemmish]

Ah, the answer was a dynamic import:

const MasonryMod = dynamic(() => import('masonic').then((mod) => mod.Masonry), { ssr: false })

[jaredLunde]

Yeah, if you're rendering it on the server you need a global polyfill for it in v4

https://github.com/jaredLunde/masonic/releases/tag/v4.0.0

[trinhcongduc]

I am trying to add the library to my RemixJS app. but i got same issue : ReferenceError: ResizeObserver is not defined

[jaredLunde]

Remix renders on the server. Same answer applies: #165 (comment)

[trinhcongduc]

Can you give me a demo, i have install global polyfill but it still doesn't work!

[jaredLunde]

Same way tests work: https://github.com/jaredLunde/masonic/blob/main/src/index.test.tsx#L47

Masonry libraries need a browser to work ... they have to know the size of their container/window. So another thing you can do is rethink your approach and only render it in the client where it belongs : )