Importing GSAP modules with Next.js : "document is not defined"

[crntn]

Hey everyone,

 

I'm trying to migrate my React project (made with CRA) to a Next.js environment. I wonder if someone already has a similar error when importing GSAP modules (Flip, DrawSVGPlugin…). When I try to animate DOM elements in my hooks, I have this error :
ReferenceError : document is not defined(cf. screenshot)

That's frustrating because I have no issue with React (CRA), but only with Next.js.

I read the Next.js documentation and searched questions about it before writing this topic, and saw nothing about this issue. 

 

Thank you!

 

[Rodrigo]

Hi,

 

In the case of server side rendering is better to watch for the window object when registering GSAP plugins:

import gsap from "gsap/dist/gsap";
import { Flip } "gsap/dist/Flip";
import { SplitText } "gsap/dist/SplitText";

if (typeof window !== "undefined"){
  gsap.registerPlugin(Flip, SplitText);
}

Also keep in mind that SplitText is a Club GreenSock bonus plugin, so you either have to install GSAP using a private token created in your dashboard or using the provided .tgz file you can download in the dashboard (if you are a Club GreenSock member of course). If you're not a member you can always install the GSAP Trial package in order to test all the bonus plugins locally.

 

Hopefully this clear things up. Let us know if you have more questions.

 

Happy Tweening!

[crntn]

Thanks, Rodrigo! That makes sense!