lrvaka Posted December 29, 2022 Share Posted December 29, 2022 Currently running NextJS 13.0.7 - trying to registerPlugin but I get the following error "ReferenceError: document is not defined". I have another project running 12.3.1 that allows me to registerPlugin. I've seen a few examples of registerPlugin being used in the forums on NextJS 13.0 so I'm unsure as to what is causing this problem exactly. import { gsap } from "gsap"; import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin"; import { SplitText } from "gsap/dist/SplitText"; gsap.registerPlugin(DrawSVGPlugin, SplitText); export default function Home() { return ( <> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <Navbar /> <main> <Hero /> <Projects /> <AboutUs /> <Services /> <CTA /> <WhyUs /> </main> <Footer /> </> ); } Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 29, 2022 Share Posted December 29, 2022 GSAP needs the document and window to be defined in order to function. It sounds like you've put your gsap.registerPlugin() in a place in your code where those things don't exist yet (server side rendering I assume). So just move the gsap.registerPlugin() to where you're sure those things will exist. For example, in a lifecycle method. I'm not familiar with Next, but basically wherever you've put your actual GSAP code, like gsap.to(...) - that's probably a safe place to do the registration. Just make sure you call the gsap.registerPlugin() before you actually create any tweens or split text, that's all. If you still have trouble, here's a Next starter template that you can fork on Stackblitz. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
lrvaka Posted December 29, 2022 Author Share Posted December 29, 2022 13 minutes ago, GSAP Helper said: GSAP needs the document and window to be defined in order to function. It sounds like you've put your gsap.registerPlugin() in a place in your code where those things don't exist yet (server side rendering I assume). So just move the gsap.registerPlugin() to where you're sure those things will exist. For example, in a lifecycle method. I'm not familiar with Next, but basically wherever you've put your actual GSAP code, like gsap.to(...) - that's probably a safe place to do the registration. Just make sure you call the gsap.registerPlugin() before you actually create any tweens or split text, that's all. If you still have trouble, here's a Next starter template that you can fork on Stackblitz. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Thanks for the response - however I see that the starter templates that are referenced have the gsap.registerPlugin() not inside of a lifecycle method, but how I have it in my example - it seems that latest version of NextJS 13.0.7 breaks this 🤷♂️ Link to comment Share on other sites More sharing options...
GreenSock Posted December 29, 2022 Share Posted December 29, 2022 Did you try putting it into a lifecycle method? Where's your GSAP code? I didn't see any in that excerpt you posted, so I'm curious why you're even importing/registering them there. Again, the issue here is that you're trying to register/use the plugins when there is no document defined yet and that obviously can't work. So I'd encourage you to find a way in Next.js to execute code AFTER the document exists, and just do your registration there. See what I mean? Thanks for being a Club GreenSock member! 💚 Link to comment Share on other sites More sharing options...
Rodrigo Posted December 29, 2022 Share Posted December 29, 2022 Hi, Just check if the window object is defined so the registerPlugin method is executed on the client and not the server: import gsap from "gsap/dist/gsap"; import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin"; import { SplitText } from "gsap/dist/SplitText"; if (typeof window !== "undefined") { gsap.registerPlugin(DrawSVGPlugin, SplitText); } Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now