Ensuring that masonry will only be initialized on the client side (SSR fix)

[cliqqz]

Since JS frameworks / libraries + SSR (Server-Server-Rendering) got pretty popular it would be great to make this plugin work with SSR projects. This condition ensures that the masonry plugin will only load within the browser and not on the server and eventually crash it by resulting in a ReferenceError for the window object.

an older reference issue I found where other people experienced this: #966

[desandro]

Thanks for this contribution. I think there is a better solution to load import masory-layout when you're in a SSR environment.

[drewbaker]

I would Masonry to have not throw window not defined errors when used with import. Yes you can work around this with a require() but now with the popularity of Vite that doesn't work out of the box either. So this PR would have been a nice solution I think.

[Xyaren]

This is also blocking me from using SSR. Please consider this PR.

[jvyden]

For those looking for a workaround for Angular SSR while this PR becomes official, you can tell NPM to pull this version directly from git if you specify the repository and commit hash in your package.json:

    "masonry-layout": "github:cliqqz/masonry#ffd2b614237176fd184b70b90a4559f9716dd29c",

I believe you also need to modify your package-lock as well for changes to take effect. You can view my implementation here: https://github.com/LittleBigRefresh/refresh-web/blob/master/package.json

[jvyden]

Approving as I've had this working in production for a couple months now. Pretty sure this repository is just unmaintained, though.

Our best bet is native support for masonry grids in CSS to stop being experimental: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

[Xyaren]

For those looking for a workaround for Angular SSR while this PR becomes official, you can tell NPM to pull this version directly from git if you specify the repository and commit hash in your package.json:

    "masonry-layout": "github:cliqqz/masonry#ffd2b614237176fd184b70b90a4559f9716dd29c",

I believe you also need to modify your package-lock as well for changes to take effect. You can view my implementation here: https://github.com/LittleBigRefresh/refresh-web/blob/master/package.json

As I am using it as a peerDependency of ngx-masonry I was able to define an overwrite like this:

...
  "dependencies": {...},
  "devDependencies": {...},
  "overrides": {
    "ngx-masonry": {
      "masonry-layout": "github:cliqqz/masonry#ffd2b614237176fd184b70b90a4559f9716dd29c"
    },
...

https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

This requires a non-ancient npm version though.

[leblancmeneses]

alternative solution given this is a 1 line fix is to use npx patch-package masonry-layout after you update node_modules/masonry-layout with what this pr has.