GSAP & TypeScript & Webpack w/ Top-level await

[kalaschnik]

Hey all,

 

I would like to integrate gsap in my next project. For this project I rely on Webpack 5 configured to use TypeScript w/ top-level await support.

For this startup config I have a repo:

https://github.com/kalaschnik/multipurpose-webpack-config-typescript

 

When I try to npm i gsap and to load import { gsap } from 'gsap';

 

I get this error: Cannot find module 'gsap'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?ts(2792)

 

Is there any working Webpack/TypeScript (w/ top-level await) config that works with gsap? Maybe I am missing something else here...

[Rodrigo]

Hi @kalaschnik and welcome to the GreenSock forums!

 

Please take a look at this in order to find other ways to use GSAP:

https://greensock.com/docs/v3/Installation#npm-club

 

Maybe you are using UMD/CommonJS modules in your setup? Also the repo you posted doesn't have GSAP in the package.json file and in any file in the src folder I see an import statement for GSAP.

 

Happy Tweening! 

[kalaschnik]

Hey Rodrigo.

 

Indeed maybe I wasn’t clear. The module is set to: "module": "es2022",

 

To reproduce my error:

1. Download/clone the repo

2. npm i

3. npm i gsap

4. Within app.ts: import { gsap } from 'gsap';

5. Error appears.

 

It seems that gsap wants to set module to "module": "CommonJS", but that would create a lot other issues...

[Cassie]

Hey there.

I downloaded your repo, and this worked for me.  Seems like the typescript default module resolution is classic, so it wasn't searching from node_modules. 

app.ts

import { gsap } from "gsap";

gsap.to("p", {
 y: 200,
 repeat: -1,
 yoyo: true,
 transformOrigin: 'center center'
})

 

tsconfig.json

"module": "es2022",
"moduleResolution": "node",    

 

https://www.typescriptlang.org/docs/handbook/module-resolution.html

Hope this helps and I didn't misunderstand your question.

multipurpose-webpack-config-typescript-main.zip

[kalaschnik]

Thanks Cassie! You got it!

 

Configuring such stuff is worst part of frontend... 

 

Hope this answer helps others

[Cassie]

Agreed, Webpack is especially haunted, I'm sure of it. 😬