Allow usage with server side rendering / gatsby

[baba43]

Hello,

first let me thank you a lot for providing and supporting such an easy to use library.

I'd like to use it within one of my Gatsby projects. Gatsby compiles a static version of each page/route and therefore the build fails if the code tries to access window.

Usually, we can come around this issue by checking for typeof window !== 'undefined' before it is used anywhere, but that doesn't work in this case. It seems window is accessed/required right after importing. Can you follow me?

Sadly, I'm not really sure how to resolve this problem, but I'm trying to investigate the webpack build.

[aholachek]

Hi, quick question -- are you calling wrapGrid on componentDidMount or useEffect? That should theoretically avoid the problem I think. But if not, is there any way you could link to the code or make a reproduction for me to check out?

[baba43]

It doesn't matter. The problem occurs always, even if wrapGrid is never called. I think the problem is related to auto-generated code from Webpack. Within the first lines (dist/main.js) there is one single window passed to a function and as soon as I replace it with typeof window !== 'undefined' && window everything is working fine. Sadly, my understanding of Webpack internals isn't enough to understand what is done there and how to change this behaviour.

However, for now I found a workaround using require instead of import:

let wrapGrid = null
if (typeof window !== "undefined") {
  // conditional include because window is undefined on build
  wrapGrid = require("animate-css-grid").wrapGrid
}

This way the script won't be included when building server-side.

[confuzeus]

let wrapGrid = null
if (typeof window !== "undefined") {
  // conditional include because window is undefined on build
  wrapGrid = require("animate-css-grid").wrapGrid
}

Was having the same issue, this fixed it.