Cannot find module gsap/ScrollTrigger

[dagda1]

I have the club account and I have this in my package.json
 

"gsap": "npm:@gsap/shockingly@3.12.4",


I used to be able to load ScrollTirgger and ScrollText without error but I have changed the project type to esm and I Now get this error
 

Quote

> Error: Error: Cannot find module '/Users/paulcowan/projects/cuttingedge/apps/frontendsupport/node_modules/gsap/ScrollTrigger' imported from /Users/paulcowan/projects/cuttingedge/apps/frontendsupport/server/index.mjs Did you mean to import gsap+shockingly@3.12.4/node_modules/@gsap/shockingly/ScrollTrigger.js?

I am not sure how to debug this

[GreenSock]

Hm, that sounds pretty strange. It's difficult to troubleshoot blind, but maybe try deleting your package-lock file, uninstall and re-install gsap? Or check to see if it actually exists in your node_modules/gsap folder. I can tell you for sure that the ScrollTrigger file is indeed in the package we're serving from the private repository. Nobody else has complained about it missing, so maybe there was some glitch when you installed it on your end? Are you able to find a file at node_modules/gsap/ScrollTrigger.js? 

[dagda1]

I've removed `node_modules` multiple times and all the usual fixes.

 

I am using pnpm and I have gsap declared like this in the package.json file

 

"gsap": "^3.12.4",

 

and I have this override for the `gsap/shockingly`

 

"pnpm": {

  "overrides": {

    "gsap": "npm:@gsap/shockingly@^3.12.4"

  }

}

 

If you look at the stacktrace, it cannot find `gsap` in `node_modules/gsap`.

 

Quote

> Error: Error: Cannot find module '/Users/paulcowan/projects/cuttingedge/apps/frontendsupport/node_modules/gsap/ScrollTrigger' imported from /Users/paulcowan/projects/cuttingedge/apps/frontendsupport/server/index.mjs Did you mean to import gsap+shockingly@3.12.4/node_modules/@gsap/shockingly/ScrollTrigger.js?

 

 

Should there be a `@gsap/shockingly` folder in `node_modules?

 

 

 

[GreenSock]

On 12/18/2023 at 12:56 PM, dagda1 said:

Should there be a `@gsap/shockingly` folder in `node_modules?

I don't think so. I have zero experience with pnpm but if I remember correctly, there may be some problems/bugs with that when it comes to private repositories. I'm curious if you're able to try just using npm instead of pnpm. 

 

When you install the bonus stuff, it should still all end up in a node_modules/gsap folder (I don't think it's a folder named "@gsap/shockingly" - that's merely an alias for pulling it in from the repository). 

 

Have you tried just following the regular directions from the gsap.com/install page instead of doing the "overrides" stuff? Or you could just download the zip file from your account dashboard, drop the gsap-bonus.tgz file into your project directory, and then run npm install ./gsap-bonus.tgz which should install it just like a regular NPM package, but using that local file.  Those directions are on the install page too. 

 

Hopefully @Prasanna (our resident private repo guru) can chime in here soon with his suggestions. 

[Windpixel]

FWIW - I followed the GSAP installation instructions for my Nuxt3 App, using pnpm, Im using a private repo and have no issues with deployment via Vercel.

 

My package.json file:

"dependencies": {

"gsap": "npm:@gsap/shockingly@^3.12.4",

}

My pnpm-lock.yaml file:

gsap:

specifier: npm:@gsap/shockingly@^3.12.4

version: /@gsap/shockingly@3.12.4

[Prasanna]

@dagda1 it appears that in your installation is creating a `@gsap/shockingly` folder instead of `gsap`. This might be due to the pnpm version that you're using.

The easiest solution for you would be to run `pnpm add @gsap/shockingly` and import the packages using `import GSAP from '@gsap/shockingly'`

 

Otherwise, try updating the pnpm version and you should be good too

[dagda1]

I'm on the latest pnpm, pnpm always alerts you when a new version is available.

The docs say to add it like this:

pnpm add gsap@npm:@gsap/shockingly

 

Which I did and I'm definitely not good :).

 

[dagda1]

I finally got it sorted and it was a bit convoluted.  This was a remix project hosted on AWS.

I had to add this to my remix.config.js
 

serverDependenciesToBundle: [/^gsap.*/],}

[Rodrigo]

Hi,

 

I see that you edited your last post and is great to hear that you were able to solve it! 🎉

 

What strikes me as a little odd is the fact that we actually have a Remix simple demo that uses our latest useGSAP hook without any issues:
https://stackblitz.com/edit/remix-run-remix-3bjuv1?file=app%2Froutes%2F_index.tsx

 

No need to update the remix config file there as you can see.

 

Still I'll try to create a simple remix app in my local machine with the bonus plugins just to check.

 

Happy Tweening!

[dagda1]

You need to create the remix project with the aws architect template. 

 

The code runs in a lambda 

[beredis]

It’s fantastic to hear that the Remix simple demo is working smoothly with the latest useGSAP hook! It’s always a relief when things work as expected right out of the box. 😄 Creating a simple Remix app locally to test the bonus plugins sounds like a great idea. Autodesk Inventor Professional 2024 features. It’s always good practice to verify everything in a controlled environment to ensure compatibility and functionality.