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 🎉

[codeteacher330]

v2.2.0 is also working for me

[chaudev]

I'm using nextjs 13. Version ^2.2.0 and 2.6.0 did not work, but 2.2.0 worked for me.

[onyshchuk]

I was managed to workaround this issue by importing Masonry and ResponsiveMasonry directly. But it will not work correctly and still produce hydration error because it doesn't know window width on server side and cant make masonry list. So the only way is to use only on client

import { ResponsiveMasonryProps, MasonryProps } from 'react-responsive-masonry';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import _Masonry from 'react-responsive-masonry/lib/Masonry';
import _ResponsiveMasonry
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
  from 'react-responsive-masonry/lib/ResponsiveMasonry';

const Masonry: React.FC<MasonryProps> = (props) => <_Masonry {...props} />;
const ResponsiveMasonry: React.FC<ResponsiveMasonryProps> = (props) =>
  <_ResponsiveMasonry {...props} />;

[cperazal]

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

I installed 2.2.2 version and works for me. Thanks @smartpuffindev

[chaudev]

In my case:

• next 13.0.6
• react-responsive-masonry 2.2.0

I solved the problem by upgrading to Nodejs 20 from Nodejs 18

[popmanhe]

Downgrade is not a good idea.. What is the point of releasing new version that can't be used? It's a very easy fix, just delete one line of code.