Jump to content


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

Go to solution Solved by Rodrigo,

Recommended Posts

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!



Link to comment
Share on other sites

  • Solution



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!

  • Like 2
Link to comment
Share on other sites

Thanks, Rodrigo! That makes sense!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.