WebpackError: jQuery requires a window with a document

[meiskv]

`import gsap, { TweenMax } from 'gsap'

const $ = require('jQuery');

(function($){

var introText = $('.intro_txt');

TweenMax.to(introText,1,{opacity: 0.1, delay:1})

})($)`

I tried this solution that I found but It doesn't work.

import jsdom from 'jsdom'; global.document = new jsdom.JSDOM(...); const $ = jquery(global.document.window);

These errors happen on gatsby build

[markmichon]

Have you tried the details in Debugging HTML Builds? I can't speak to the jsdom workaround you posted.

Essentially you want Gatsby's build process to ignore the browser-only javascript (like accessing window). The easiest solution for most cases is wrapping that code in a check for the window object as shown in the doc link.

[jonbellah]

To tack on to what @markmichon said, this error happens because Gatsby does server rendering and the window object does not exist on the server. The window check conditional in the docs is your answer.

[meiskv]

I already fixed it. But is it okay to wrap not only the required module but the whole script for that reason? Thank you so much @markmichon & @jonbellah .

[jonbellah]

It depends on the module (and I can't necessarily tell the business case for the above code, so it's up to you). But generally, what happens when you check for the presence of the window object is it excludes that chunk/module from the SSR'd code, meaning most search engines (Google will parse JS, but there's no good evidence that others do) will not see it, nor will users who have disabled JS.

Once the server renders the initial chunk to a string and pushes it out to the client, the client parses it and loads the additional JS (which will load in your greensock stuff).

[jonbellah]

@KyleAMathews This issue appears to be resolved. Mind closing? Thanks!

[KyleAMathews]

Done :-)