Importing ScrollTrigger in Next.js isn't working.

[jnemec]

I've done another project using GSAP in Next.js, but I had zero issues with importing. I started a new project and now I'm getting "SyntaxError: Cannot use import statement outside a module". I've tried importing using gsap/dist/ScrollTrigger and it removes the error but then ScrollTrigger doesn't work at all. I'm certain I set up my other project the same way, so I'm really confused. 

 

My content is in the "components" folder.

 

https://codesandbox.io/p/sandbox/staging-resonance-szbojy?file=%2Fcomponents%2FBody.tsx&selection=[{"endColumn"%3A23%2C"endLineNumber"%3A18%2C"startColumn"%3A23%2C"startLineNumber"%3A18}]

[GreenSock]

It seems to work fine for me when I import from the UMD files: 

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

Are you saying that doesn't work for you? 

[onKeyBoard]

This does seem to be an often-reported issue wherever Next.js and ScrollTrigger are used together. 

If you know your project setup supports ES modules but ScrollTrigger is still causing Next to report the "SyntaxError: Cannot use import statement outside a module" error, try adding this to your next.config.js :
 

module.exports = {
    transpilePackages: ['gsap'],
    /* Your Next.js config */
};