Can't use in Nextjs

[i-mighty]

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

[AlexM-Val]

same here

[smartpuffindev]

Same for us. Version 2.1.7 and 2.2.2 seem to work fine; 2.3.0 breaks.

[eberlinck-soap]

Same here also with Remix v2

[narcecl]

Same here with Next 14.2.5 after upgrading to v2.3.0.

[aaronabf]

Same.

[HectorLS]

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.

[hktari]

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.``

[Ebdulmomen1]

hello, any workarounds for this?

[bashidagha]

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",

[wstevenrodriguez]

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?

[Marviuz]

// 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.

[FilipLusnia]

Anyone knows a workaround?

[ManigandanRaamanathan]

try using v2.2.0 or dynamic loading

[deskofnia]

After running this command on node version v20.18.0 solved the issue in my case

npm i [email protected]

my next version is

"next": "13.4.7",

[hellofadude]

Running npm i [email protected] with next 13.4.7 worked for me as well

[fwebmaster-gt]

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

Im Fix with Dynamic Import:

const ResponsiveMasonry = dynamic(
  () => import("react-responsive-masonry").then((mod) => mod.ResponsiveMasonry),
  {
    loading: () => <p>Loading...</p>,
    ssr: false,
  }
);
const Masonry = dynamic(
  () => import("react-responsive-masonry").then((mod) => mod.default),
  {
    loading: () => <p>Loading...</p>,
    ssr: false,
  }
);

[amadrzyk]

I had the exact same issue and can confirm that downgrading to v2.2.0 or using the dynamic loading approach above works 🎉

[momcilo330]

v2.2.0 is also working for me