GSAP ScrollTrigger causes error in Next.js

[Damian Balas]

Hi :)

I use the newest version of Next.js and I have an error in my console.

Warning: Extra attributes from the server: style
    at body

I've tried to debug it and this is the part that I think is causing the error:

This code leaves an empty style attribute on the body element.

The solution would be not to add a default style of border-top if it's not needed.

If it's needed then maybe just remove the style attribute if it's empty after bodyStyle.removeProperty("border-top-style")? (not sure if this fixes the error but I'd give it a try)

document.body.getAttribute('style') // returns an empty string "" if it's present but empty

document.body.getAttribute('style') // returns null if it's not present

Do you need to set the border top style if you then remove it anyway? I didn't dive deep into your code, but maybe you can help me with this :)
Thanks!

[Jack Doyle]

It's difficult to troubleshoot without seeing a minimal demo, but my guess is that maybe you tried calling gsap.registerPlugin(ScrollTrigger) before the window/document existed. Does it resolve things if you tuck your gsap.registerPlugin() inside your useGSAP()/useEffect()/useLayoutEffect()? If not, would you be willing to provide a minimal demo? Here's a starter Stackblitz that you can fork: https://stackblitz.com/edit/stackblitz-starters-u6rgzq

You are using the useGSAP() hook, right?

[Damian Balas]

@jackdoyle Thanks for your help without a minimal demo!
I used gsap.registerPlugin() twice... once in useLayoutEffect in a Setup component and once outside in a different component.

So it was my mistake after all :)

Awesome work with clearing issues! Good job!
Thank you very much :)

[Jack Doyle]

Glad you figured it out and got things working. To be clear, it shouldn't cause any problems if you register a plugin multiple times. My guess is that you were doing it somewhere before the window/document were defined. So just do it inside a useGSAP()/useLayoutEffect() and you should be okay.

You said you're using a useLayoutEffect(), so I wanted to make sure you knew about this hook that might make your life easier: https://www.npmjs.com/package/@gsap/react

Happy tweening!