sibiraj-s / react-layout-masonry Goto Github PK

Attempting to use Next.js v13.4.2 and errors out in browser with ReferenceError: document is not defined

Using react18 with nextjs13.5, importing without SSR like so: const Masonry = dynamic(() => import('react-layout-masonry'), { ssr: false });

Images are not placed correctly, resulting in accumulation of empty space as more images are loaded.

Issue still persists if all images are loaded at once (not added dynamically as seen in the clip)

See clip here: https://streamable.com/72rnz1

This is a great lightweight package. But it's currently limited to client side only. Will you consider adding support for SSR. For example adding a defaultColumns prop when there is a User-Agent header, then client side hydration once the window sizes are available.

Just thought I'd note this. The component is working, but I get this typescript error.

'Masonry' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.ts(2786)

this is with NEXT (app router) 13.5.3 Typescript 5.1.6