cedricdelpoux / react-responsive-masonry

React responsive masonry component built with css flexbox
https://cedricdelpoux.github.io/react-responsive-masonry/
MIT License
372 stars 38 forks source link

i keep getting this error while using it in my next13 app #113

Open geraldAp opened 11 months ago

geraldAp commented 11 months ago

Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'prototype')

Call Stack prototype node_modules\react-responsive-masonry\lib\Masonry\index.js (14:94) _inheritsLoose node_modules\react-responsive-masonry\lib\Masonry\index.js (19:2) _react node_modules\react-responsive-masonry\lib\Masonry\index.js (86:2) (rsc)/./node_modules/react-responsive-masonry/lib/Masonry/index.js file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/vendor-chunks/react-responsive-masonry.js (20:1) webpack_require file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/webpack-runtime.js (33:43) require node_modules\react-responsive-masonry\lib\index.js (6:38) (rsc)/./node_modules/react-responsive-masonry/lib/index.js file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/vendor-chunks/react-responsive-masonry.js (40:1) webpack_require file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/webpack-runtime.js (33:43) eval webpack-internal:///(rsc)/./src/app/gallery/[slug]/components/MasonaryGallery.tsx (9:82) (rsc)/./src/app/gallery/[slug]/components/MasonaryGallery.tsx file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/app/gallery/[slug]/page.js (294:1) webpack_require file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/webpack-runtime.js (33:43) eval webpack-internal:///(rsc)/./src/app/gallery/[slug]/page.tsx (13:85) (rsc)/./src/app/gallery/[slug]/page.tsx file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/app/gallery/[slug]/page.js (305:1) Function.webpack_require file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/webpack-runtime.js (33:43) async ek file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (11:455662) async tH file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:11134) async file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:13183) async tH file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:12950) async file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:13183) async tH file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:12950) async file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:13183) async tH file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:12950) async file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js

PatrykWojcieszak commented 11 months ago

Adding "use client"; at the top of your component is fixing this issue

ln-dev7 commented 11 months ago

Adding "use client"; at the top of your component is fixing this issue

Thanks so much !!!

Digitl-Alchemyst commented 6 months ago

This did not work as a fix for me as I am trying to use it in a server component that fetches and caches data. I wasn't able to get it to work tried moving it into its own component but got various errors there.

deskofnia commented 1 day ago

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

npm i react-responsive-masonry@2.2.0

my next version is

"next": "13.4.7",