The problem I have when using GSAP with NextJS + Typescript.

[projecthouse]

Hi everyone,

 

I want to use GSAP in my project with NextJS + Typescript. However, I am getting the error you will see in the screenshot.

 

My code to import the library;

 

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

 

or

 

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

 

Error;

 

 

Version information;

• "gsap": "^3.2.6"
• "next": "^10.2.0"
• "typescript": "^4.2.4"

 

I tried all the methods mentioned in the forums but could not fix this error

 

When I try with NextJS without Typescript, I get the same error.

 

Thanks

 

[GreenSock]

It's tough to know without seeing a minimal demo, but my guess is you've got faulty code somewhere. Like maybe you did this somewhere?

// BAD
ScrollTrigger(...);
              
// GOOD
ScrollTrigger.create(...);

// ALSO OKAY
new ScrollTrigger(...);

In the ScrollTrigger constructor, there's a call to this.init(...), so it kinda sounds like "this" doesn't refer to the ScrollTrigger instance which means it wasn't created with "new ScrollTrigger(...)" which is what ScrollTrigger.create() does internally also. If you call ScrollTrigger() like a normal function, that'd explain the error. 

 

I'm totally guessing here. 

 

Also, what version of GSAP/ScrollTrigger are you using? Just curious. Shouldn't really matter for this particular error but I'd recommend using the latest of course.

[projecthouse]

I imported the code and when I save it, it gives this error. I did not write any code other than Import and registerPlugin. I could not write. I am getting errors after these two operations.

 

If I could write enough code to make an example with GSAP, I can share it. I cannot proceed because it gave this error in the first place

[GreenSock]

Seems to work fine in CodeSandbox: 

https://codesandbox.io/s/optimistic-nash-p90i0?file=/pages/index.js

 

Nobody else has reported any similar problems, so it seems like maybe something with your local environment(?)

 

If you want more help, please create a simple Github repo showing the problem. There's really no other way for us to troubleshoot. We'd really love to help. 

[IbraheemHaseeb]

I am facing this exact issue Jack. Isn't there any way around it. I have been at it for hours but can't get this error to go away.

[GreenSock]

1 hour ago, IbraheemHaseeb said:

I am facing this exact issue Jack. Isn't there any way around it. I have been at it for hours but can't get this error to go away.

What issue exactly, @IbraheemHaseeb? Got a minimal demo? 

 

It sounds like from your other thread, you might be trying to use the ES Modules in a build system that doesn't understand them. So try importing the UMD files from the /dist/ directory like: 

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

If you're still having trouble, please make sure you include a minimal demo, like a CodeSandbox or CodePen.

[IbraheemHaseeb]

7 minutes ago, GreenSock said:

What issue exactly, @IbraheemHaseeb? Got a minimal demo? 

 

It sounds like from your other thread, you might be trying to use the ES Modules in a build system that doesn't understand them. So try importing the UMD files from the /dist/ directory like: 

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

If you're still having trouble, please make sure you include a minimal demo, like a CodeSandbox or CodePen.

yes got it. Thanks a lot.

[Akshata]

error :

Could not find a declaration file for module 'gsap/dist/gsap'. 

https://codesandbox.io/s/friendly-cherry-mnsx9n?file=/pages/index.tsx

Env: next js 13.4.7

typescript:5.1.6

gsap:3.12.2

[Rodrigo]

Hi @Akshata and welcome to the GreenSock forums!

 

There is no need to import GSAP Core from the dist folder, just use the regular import:

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

I just tested this on my local machine using the standard command from Next:

npx create-next-app@latest

Hopefully this helps.

Happy Tweening!

[Akshata]

5 hours ago, Rodrigo said:

Hi @Akshata and welcome to the GreenSock forums!

 

There is no need to import GSAP Core from the dist folder, just use the regular import:

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

I just tested this on my local machine using the standard command from Next:

npx create-next-app@latest

Hopefully this helps.

Happy Tweening!

Yes, it working. Thanks.