React, Next.js and GSAP issues - possible fixes for SSR
Hi guys,
I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side.
ERROR:
import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js";
^^^^^^
SyntaxError: Unexpect
Just wanted to chime in here, I have the same problem with the defaultView, using next-plugin-transpile-modules. I also have been using @Hossein Rahimis solution, but it's not perfect because it introduces issues with scoping. With next.js you can also dynamically import the plugin with something like
const SplitTextPromise = import("gsap/SplitText");
and then in componentDidMount, wait for the promise to resolve
SplitTextPromise.then(SplitText => {
c
