Window is not defined issue after updating to angular v16

[ahmadallw]

"@angular/common": "^16.0.3",
"@angular/compiler": "^16.0.3",
"@angular/core": "^16.0.3",
"masonry-layout": "^4.2.2",
 "ngx-masonry": "^14.0.1"

After updating project to angular 16 & when running npm run build:dev & npm run build:dev:ssr the following error appears
Window is not defined

We tried to remove ngx-masonry & run build the issue disappears & build works normally

I guess ngx-masonry should be update to be compatible with angular 16

can we have any support or help to fix this issue

[dvalley56]

Hii @ahmadallw,

I don't think this library has anything to do with the issue, I too had the same problem when I updated to angular 16 but for a different library,

The library was dependent on window object to work, it was working till angular 15, after reverting back to v15 the issue got resolved.

My guess is angular team has changed something that we are unaware of.

For your reference, this was the library SuperTokens Web JS SDK.

[philipp-doblhofer]

Hey

version 14.0.1 introduces this behavior. The reason is, that until 14.0.0, masony-layout is only loaded, if the platform is the browser ac0fba0#diff-aefcd863ab41105b9cb15444561732d61ca30a75efadda97f6aad513ad01e6f0L39

In 14.0.1 it is imported without this check.

Since https://github.com/desandro/masonry/blob/master/masonry.js (line 9) is using window without checking if it is valid, the error is thrown for SSR

[dirk-jacobs]

Same issue

[Xyaren]

Same issue here.

Related old issue: #37

Since https://github.com/desandro/masonry/blob/master/masonry.js (line 9) is using window without checking if it is valid, the error is thrown for SSR

Should this library import masonry-layout only when a browser environment is detected ?

Is this doable with the import keyword ?

Edit: also related with possible workaround: desandro/masonry#1121 (comment)