fix: Fix SSR issues by ensuring window object is accessed only on the client side

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

fix: Fix SSR issues by ensuring window object is accessed only on the client side #121

Closed kode15333 closed 2 months ago

kode15333 commented 3 months ago

Problem

The MasonryResponsive component accesses the window object during server-side rendering (SSR), causing errors since window is only available on the client side.

Solution

Initial State Setup: Modified useWindowWidth to set the initial state using typeof window !== "undefined" ? window.innerWidth : 0 to prevent SSR errors.

cedricdelpoux commented 2 months ago

Hello @kode15333. Sorry I did not see your PR. I just pushed a similar fix and published v2.2.2. Could you try if the issue is fixed? Thanks

kode15333 commented 2 months ago

@cedricdelpoux i think SSR Issue(window not defined) is happend again.

can you reopen this pr?

cedricdelpoux commented 2 months ago

Again? So it was not happening anymore? My fix is pretty similar to yours https://github.com/cedricdelpoux/react-responsive-masonry/commit/0efac6e6ee978c25d4712273cd18e7ba53be43c3

cedricdelpoux commented 2 months ago

I could not merge your PR because it's conflicting now but I applied your fix. Could you test v2.3.0? Thanks