Unable to load GSAP with Node

[bishopZ]

When attempting to import 'gsap' I get the error "document is not defined."

I am using webpack on a node server. The document and window objects are not defined globally in webpack. I found this forum post that suggests modifying the TweenMax source.

If I add this to the beginning of TweenMax.js

var window = global.parent || {}
  , navigator = { userAgent: "" }
  , dummyElement = { style: {}, getElementsByTagName: function() { return [] } }
  , document = global.document || { createElement: function() { return dummyElement } };

I can get it to work in my local environment. But I can not modify the source of TweenMax on the server because it is downloaded from NPM.

My code looks something like this

// package.json
"engines": {
    "node": "=6.2.2",
    "npm": "=3.9.5"
  },
"dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-gsap-enhancer": "0.2.2",
    "gsap": "1.19.0",

// App.jsx
import GSAP from 'react-gsap-enhancer';
import {TimelineMax} from 'gsap';

Any help appreciated.

[azazdeaz]

Hi, ugly hack but you can add this variables to the global in your main.js like here: https://github.com/azazdeaz/react-gsap-enhancer/blob/server/examples/server-side-rendering/env-for-gsap.js

[bishopZ]

Hey, good idea. I went a little ways down that road and found that it turned into a rabbit hole of implementing dummy methods to mirror the browser environment. The ones you have work for your library, but I am having similar problems with Bootstrap.

The best solution I have so far is to load react-gsap-enhancer normally, but load gsap with a script tag and access it with window.TimelineMax inside react components.

[azazdeaz]

Yes, i prefer that way too.