Server side rendering issues

[tingc10]

Hello, I have GSAP installed via npm in my node project which is a isomorphic React app. When I try to import any libraries from Greensock into my modules, I get a "ReferenceError: document is not defined" error.

I realize that this is because during server side rendering, there is no window or document object. Currently the way around this is to require('gsap') inside the componentDidMount function of the component importing GSAP. Do you guys have any suggestions as to how I can modify the library to workaround this error? I find my current method to be a bit hacky and would prefer a import {...} from 'gsap' method.

[jackdoyle]

Are you using version 1.19.0? If so, you should be able to:

import { TweenLite, TimelineMax, CSSPlugin, Elastic, Power2 } from "gsap";

But perhaps the problem is that you're not really targeting the browser (I've only tested in browser-focused implementations). Are you saying that the above gives you an error about the window or document not being defined? If so, do you have a reduced test case that'd be simple to set up and run?

[tingc10]

Thanks for the quick response, Jack. I apologize in advance that this isn't a "reduced" test case since it's a server side rendering issue, but I do have a repository you can install to replicate this error.

https://github.com/tingc10/isomorphic-with-gsap

1) npm install 2) npm run dev

I have added the recommended import line to the file located at /src/components/InfoBar/InfoBar.js

[jackdoyle]

It's very difficult to troubleshoot this without a reduced test case - even when I hacked around the errors being thrown in TweenMax because there was no "document" or "navigator" defined by adding this to the top:

var window = this || {};
var document = window.document = this.document || {createElement:function() {}}};
var navigator = this.navigator || {userAgent:""}; 

it still threw errors in other dependencies you've got in there (totally unrelated to GSAP). I just don't have the time to decouple all those other dependencies and figure out what's going on in your project. Sorry. But I can say that CSSPlugin kinda needs something that at least acts like a browser for obvious reasons, so I'm not sure it's realistic to expect it to all work okay headless (without a browser). I wish I had an easy answer for you.

[tingc10]

Got it, thanks for the attempt. I'll update this issue when I have created a reduced test case and see if the problem still exists without all the extraneous dependencies.

[jackdoyle]

Sounds good. I'll close this for now, but feel free to re-open it if/when you've got more info to share and a reduced test case. Thanks!