Jump to content
Search Community

Scroll Trigger Bug in Nextjs 13.4 App Directory client component - Warning Extra attributes from the server: style

omarel test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Screenshot 2023-06-06 at 2.17.35 PM.png

Link to comment
Share on other sites

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

Hi,

 

Still no luck with the link:

84ca2cw.png

 

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

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

 

Screenshot 2023-06-06 at 6.16.12 PM.png

Link to comment
Share on other sites

  • Solution

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

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

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

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

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

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

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

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

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

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

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.
×
×
  • Create New...