Error when used with Gatsby: error "window" is not available during server side rendering.

[JoshuaKGoldberg]

The project isn't open source 😞 but here's a relevant snippet from a build:

5:22:47 PM: error "window" is not available during server side rendering.
5:22:47 PM: 
5:22:47 PM: > 1 | !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.Freezeframe=n():t.Freezeframe=n()}(window,(function(){return function(t){var n={};function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return
...

gatsby-log.txt

[nickforddev]

Sounds like this is just a general issue with SSR compatibility with libraries that use browser-only APIs.

Have you looked at gatsbyjs/gatsby#309?

It's not specific to this library, so I'm closing for now.

[JoshuaKGoldberg]

@nickforddesign I have looked at that 😄 and while the general error isn't specific to this library, the issue is that freezeframe.js accesses the window object immediately - regardless of the runtime it's working in.

Generally, the solution for getting code that tries to do that is to have it either:

• Check for whether typeof window !== "undefined" (e.g. Window is not defined gatsbyjs/gatsby#309 (comment))
• Switch to async loading behavior such as componentDidMount (e.g. Window is not defined gatsbyjs/gatsby#309 (comment))

More recently, globalThis is also a useful strategy.

Would you be open to any of these changes, and if so, could you please reopen this issue? There is behavior done in this library that makes it difficult to use in frameworks such as Gatsby.

[nickforddev]

Thanks for clarifying, I will look at this

[JoshuaKGoldberg]

Thank you very much! I'd be happy to help / send a PR / etc., if it's useful at all.

[jonrrivera]

hi everybody, I'm getting the same error when using next.js. I tried defining
if (typeof window !== "undefined") { new Freezeframe(); }
which removed the 'window not defined error', but now the project is not compiling. Please let me know if you need any further clarification. thank you!

[jonrrivera]

https://www.npmjs.com/package/react-freezeframe !!

[Chinomso1995]

Did anyone manage to find a way around this for gatsby projects.

[nickforddev]

in general I'd recommend that SSR be skipped for this components, even JSDOM doesn't fully implement the canvas APIs required. So, whatever SRR framework you are using, let it skip freezeframe components.