[React, Next.js and GSAP issues - possible fixes for SSR]

On 1/2/2019 at 9:55 AM, Hossein Rahimi said:

I found a way to use GSAP to React with Next.js without a problem.

You can load GSAP components in componentDidMount() method of your React Class.

Like this:

componentDidMount(){
        const GSAP = require('gsap');
        const { TweenMax, TimelineLite, Power4 } = GSAP;
        TweenMax.to(el, 1, { top: -100 });
    }

 

There is an easy reason for problems like this in Next.js.

Next.js is an SSR library and GSAP is a Client Side library. When You import GSAP in the top of your project, it throws an error because GSAP can't access to Window object in JS.

 

But, when you require it in your componentDidMount(), it will require after the page loaded and it will access to Window object in js.

Hope it will help you all.

 

The new way to get around this problem is to use dynamic component with disabled SSR for the component that's using GSAP https://nextjs.org/docs#with-no-ssr