Open i-mighty opened 1 month ago
same here
Same for us. Version 2.1.7 and 2.2.2 seem to work fine; 2.3.0 breaks.
Same here also with Remix v2
Same here with Next 14.2.5 after upgrading to v2.3.0.
Same.
I am able to use it in Nextjs app router
"next": "^14.2.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-responsive-masonry": "^2.3.0",
'use client'
import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
import { FC } from 'react'
const columnsBp = {
350: 2,
750: 3,
992: 4
}
export const SectionMasonryGrid:FC<Props> = ({ data }) => {
const Items = useMemo(() => getItems(data), [data])
return (
<section>
<ResponsiveMasonry columnsCountBreakPoints={columnsBp}>
<Masonry gutter={'2vw'}>
{Items}
</Masonry>
</ResponsiveMasonry>
</section>
)
}
The only thing right now is that im having a bug related to hydration which sucks because i want to be SSR but if i use a isMount hook this doesn't happen. Hope it helps.
confirmed that it works on :
"react-responsive-masonry": "^2.1.7",
"react": "^18.3.1",
"next": "^14.2.4",
interestingly something like this fails. Notice the {" "}
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named
imports.``
hello, any workarounds for this?
For now, You should strict version of react-responsive-masonry
and also Next.js in my experience to version 13.
"next": "13.1.6",
"react": "18.2.0",
"react-responsive-masonry": "2.1.7",
I am able to use it in Nextjs app router
"next": "^14.2.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-responsive-masonry": "^2.3.0",
'use client' import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry' import { FC } from 'react' const columnsBp = { 350: 2, 750: 3, 992: 4 } export const SectionMasonryGrid:FC<Props> = ({ data }) => { const Items = useMemo(() => getItems(data), [data]) return ( <section> <ResponsiveMasonry columnsCountBreakPoints={columnsBp}> <Masonry gutter={'2vw'}> {Items} </Masonry> </ResponsiveMasonry> </section> ) }
The only thing right now is that im having a bug related to hydration which sucks because i want to be SSR but if i use a isMount hook this doesn't happen. Hope it helps.
Hi, how do you use the hook?
// components/ui/masonry.ts(x)
'use client';
import dynamic from 'next/dynamic';
export const ResponsiveMasonry = dynamic(() =>
import('react-responsive-masonry').then((mod) => mod.ResponsiveMasonry),
);
export const Masonry = dynamic(() => import('react-responsive-masonry'));
This have FOUC though so you might want to handle that.
Anyone knows a workaround?
I installed as per the docs and I set in a component within a nextjs project. Expect behavior: The component works as expected. Actual behavior: I get this error
⨯ TypeError: Cannot set property ResponsiveMasonry of #<Object> which has only a getter