NextJS and gsap

[benjeske 1 Likes (Newbie)]

Hi I'm trying to load gsap into my nextjs project. I've got it nearly completed but I am getting this error from the package:

 

SyntaxError: Unexpected token 'export'

/node_modules/gsap/ScrollTrigger.js:534

line 534:

export var ScrollTrigger = /*#__PURE__*/function () {

Any advice for getting this to work? I've been searching but haven't been able to find any solutions to this problem.

[elegantseagulls 1,450 Likes (Superhero)]

What does your import look like? For nextjs you'll need to import the umd version:

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

 

[benjeske 1 Likes (Newbie)]

3 minutes ago, elegantseagulls said:

What does your import look like? For nextjs you'll need to import the umd version:

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

 

 

import ScrollTrigger from 'gsap/ScrollTrigger';

^ was what I was using

 

This was exactly the problem, thank you!!

[GreenSock 18,878 Likes (Superhero)]

1 hour ago, elegantseagulls said:

What does your import look like? For nextjs you'll need to import the umd version:

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

 

I would assume that gets the UMD version of ScrollTrigger, but the ES Module of GSAP (the core). Shouldn't it look like this?

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

 

[benjeske 1 Likes (Newbie)]

6 minutes ago, GreenSock said:

I would assume that gets the UMD version of ScrollTrigger, but the ES Module of GSAP (the core). Shouldn't it look like this?

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

 

Can confirm, I updated the gsap import as well to the /dist/ directory and it's working. Tested successfully locally and in my production environment.

[OSUblake 18,534 Likes (Superhero)]

5 hours ago, GreenSock said:

I would assume that gets the UMD version of ScrollTrigger, but the ES Module of GSAP (the core). Shouldn't it look like this?

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

 

 

I think import { gsap } from 'gsap' gets the umd version in nextjs based on the main field in the package.json.

 

 

[elegantseagulls 1,450 Likes (Superhero)]

46 minutes ago, OSUblake said:

I think import { gsap } from 'gsap' gets the umd version in nextjs based on the main field in the package.json.

It must?... I've never had an issue importing it this way, and we run Next.js with most of our projects.

 

[vanja6 6 Likes (Newbie)]

Hey guys, I know this was posted long time ago, but I had such a hard time figuring this out and these posts helped me A LOT,  so thank you!

[Serhat Düzgün 3 Likes (Newbie)]

On 6/30/2020 at 8:40 PM, elegantseagulls said:

What does your import look like? For nextjs you'll need to import the umd version:

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

 

Thank you so much. You saved my life!