document is not defined

Hi guys!

I’m trying to add TweeMax.js from GSAP on a project with the same SSR and webpack configuration as this one ( I did copy everything for testing purposes ). When I run npm run dev it generates de client and vendor bundles perfectly, but when I access any route it throws the following exception:

/Users/vitor/Sites/ssr-test/front-end/server.js:105
        throw err
        ^

ReferenceError: document is not defined
    at Function.<anonymous> (/Users/vitor/Sites/ssr-test/front-end/node_modules/gsap/src/uncompressed/TweenMax.js:2571:11)
    at check (/Users/vitor/Sites/ssr-test/front-end/node_modules/gsap/src/uncompressed/TweenMax.js:5986:61)
    at new Definition (/Users/vitor/Sites/ssr-test/front-end/node_modules/gsap/src/uncompressed/TweenMax.js:6010:10)
    at window._gsDefine (/Users/vitor/Sites/ssr-test/front-end/node_modules/gsap/src/uncompressed/TweenMax.js:6015:12)
    at Array.<anonymous> (/Users/vitor/Sites/ssr-test/front-end/node_modules/gsap/src/uncompressed/TweenMax.js:2524:11)
    at /Users/vitor/Sites/ssr-test/front-end/node_modules/gsap/src/uncompressed/TweenMax.js:7791:9
    at Object.<anonymous> (/Users/vitor/Sites/ssr-test/front-end/node_modules/gsap/src/uncompressed/TweenMax.js:7802:3)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)

I did some research, and I think it’s because we don’t have document or window global objects on the server side environment. I tried to fix it declaring both as global variables on the server-entry.js file, but it was unsuccessful

if (typeof(window) == 'undefined'){
    let dummyElement = { style: {}, getElementsByTagName: function() { return [] } }
    global.window = {}
    global.navigator = { userAgent: "" }
    global.document = { createElement: function() { return dummyElement } }
}

Maybe anyone can help me with that? I’m probably missing something.

Thanks!

[ktquez]

Working for me.

require('jsdom-global')(html, {
  url: `http://${process.env.HOST}:${process.env.PORT}`
})

[nghiepdev]

Try install npm i -S gsap Edit in file webpack.base.config.js

entry: {
    app: './src/client-entry.js',
    vendor: [
      .....
      'gsap',
      .....
    ]
  },