Share Posted June 6 Hi I'm testing using scrollTrigger in NextJS 13.4 app directory where all components are server side first but this component is specified as a client component. For some reason, the simple importing of ScrollTrigger has a significant console log error. Whenever I remove the ScrollTrigger import the error goes away. Can we look into this? Sandbox: CodeSandbox Test by looking at the console and hide and unhide the import: import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); Produces the console log error: Warning Extra attributes from the server: style Link to comment Share on other sites More sharing options...
Share Posted June 6 Hi, For some reason I can't access the codesandbox (there is an error) and unfortunately last time we checked Stackblitz was having some issues with the latest versions of Next (13.3 and up). What you could try is register ScrollTrigger only on the client: import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } So that particular code doesn't run on the server and creates that issue that, for some reason, is a problem for Next. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted June 6 I updated the codesandbox share link. It should work now. I mistakenly placed in the codepen area. This is a client component, not server component. Link to comment Share on other sites More sharing options...
Share Posted June 6 Hi, Still no luck with the link: Did you try registering the code just on that condition. If this is a client component I have no idea why this issue is actually happening. Why Next is complaining about an style attribute in the server if the code runs on the client in theory? Makes no sense 🤷♂️ Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted June 6 I guess you haven't seen it yet. Updated the link once again. I was able to access it logged out: https://codesandbox.io/p/github/oelbaga/nexts13.4_gsap_scrolltrigger_bug/main "use client"; import { useEffect, useRef, useState } from "react"; import Image from "next/image"; import styles from "./page.module.css"; import { gsap } from "gsap"; //importing gsap scrolltrigger throws console log error import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function Home() { const tl = useRef(); const h1Ref = useRef(); useEffect(() => { let ctx = gsap.context(() => { gsap.fromTo( h1Ref.current, { opacity: 0, }, { opacity: 1, duration: 1, } ); }); return () => ctx.revert(); }, []); return ( <main className={styles.main}> <h1 ref={h1Ref}>Hello World</h1> </main> ); } Scroll Trigger import error: Warning: Extra attributes from the server: style Link to comment Share on other sites More sharing options...
Solution Solution Share Posted June 7 Just move your gsap.registerPlugin(ScrollTrigger) into the useEffect()/useLayoutEffect() and you should be fine. It is indeed annoying that Next.js throws that error. It's not a problem with GSAP/ScrollTrigger. Does that solve things for you? Link to comment Share on other sites More sharing options...
Author Share Posted June 7 The error happens only with the scroll trigger import not gsap. I didn’t know it was possible to place the plug-in registration in useEffect. I’ll try that and report back on the thread. Link to comment Share on other sites More sharing options...
Author Share Posted June 7 59 minutes ago, GreenSock said: Just move your gsap.registerPlugin(ScrollTrigger) into the useEffect()/useLayoutEffect() and you should be fine. It is indeed annoying that Next.js throws that error. It's not a problem with GSAP/ScrollTrigger. Does that solve things for you? That did remove that error, but I haven't tested if scroll trigger actually works when the registerPlugin placed in the useEffect as I've never placed it there. Can I assume so? Link to comment Share on other sites More sharing options...
Share Posted June 7 Yep. And just to explain what's going on, ScrollTrigger protects against various problems by setting a few CSS properties on the <body>. Apparently Next.js complains about that...but only on the first (SS) render. 🤷♂️ Pretty weird. You're using the latest version of GSAP/ScrollTrigger, right? Link to comment Share on other sites More sharing options...
Author Share Posted June 8 I do appreciate the fix. Just a note: I did test adding properties to the body tag but it doesn't throw any error though. So perhaps worth looking into the cause of the console log error with registerPlugin at the top: useEffect(() => { //testing adding css to body - no console log errors document.body.classList.add("test-class"); document.body.style.color = "red"; //moving registerplugin to useeffect fixes console log error gsap.registerPlugin(ScrollTrigger); let ctx = gsap.context(() => { gsap.fromTo( h1Ref.current, { opacity: 0, }, { opacity: 1, duration: 3, } ); }); return () => ctx.revert(); }, []); Link to comment Share on other sites More sharing options...
Share Posted June 8 3 hours ago, omarel said: I did test adding properties to the body tag but it doesn't throw any error though. Did you do that OUTSIDE the useEffect() though? That was the whole point - when you register the plugin, it has to do some setup stuff, some of which involved the <body> style. It looks like you did your test INSIDE the useEffect(), so it's exactly the same thing as moving gsap.registerPlugin() inside there too. Try doing your test outside the useEffect() and I bet you'll see what I mean. Link to comment Share on other sites More sharing options...
Author Share Posted June 8 Well DOM manipulations and other side effects in react should be done inside the useEffect(). Perhaps that’s the core of the error with gsap manipulations happening outside useEffect with React… Link to comment Share on other sites More sharing options...
Share Posted June 8 47 minutes ago, omarel said: Well DOM manipulations and other side effects in react should be done inside the useEffect(). Perhaps that’s the core of the error with gsap manipulations happening outside useEffect with React… Indeed, that's why I suggested moving it into the useEffect() We can't do that inside GSAP itself because we can't introduce a React dependency - GSAP is completely framework agnostic and dependency-free. Link to comment Share on other sites More sharing options...
Author Share Posted June 8 Right, trying to access the DOM outside of useEffect could throw errors because the DOM may not be loaded so I can't test if doing DOM manipulations outside of useEffect causes the same error from above. Ultimately I haven't been able to reproduce the same error from above with the Scroll Trigger registerPlugin outside of useEffect, but the error is resolved with your suggestion either way! Link to comment Share on other sites More sharing options...
Share Posted June 9 7 hours ago, omarel said: Right, trying to access the DOM outside of useEffect could throw errors because the DOM may not be loaded so I can't test if doing DOM manipulations outside of useEffect causes the same error from above. Ultimately I haven't been able to reproduce the same error from above with the Scroll Trigger registerPlugin outside of useEffect, but the error is resolved with your suggestion either way! Yeah, ScrollTrigger automatically checks to see if the window, document, and body exist and it'll only do that style stuff on the <body> if they all do exist. So it's definitely not a matter of trying to edit something that doesn't exist yet. 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