Having issues using GSAP Premium in PROD site.

[matt2211]

Hi there,
I want to start by saying that GSAP is a masterpiece. Thank you all for your hard work! ?

So given the following scenario:

• nuxt 2

Everything is working like butter in my localhost, but I am having an issue using GSAP Premium on my PROD site.
I have followed both explained methods: npm and zip file, but in both scenarios I am getting the following error:
 

ERROR in ./pages/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js)
  Module not found: Error: Can't resolve 'gsap/dist/ScrambleTextPlugin' in 'pages'
  @ ./pages/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js) 5:0-66 79:39-57

I also tried to not use the .npmrc file, and pass it from my gitlab-ci.yml file, but seems that the packages are not getting installed, or in some other cases I got the 403 error.

I also tried the below solution updating it using my token and the Premium version instead of Business, but no luck ?

Could you please help me?

Thank you.
Kindest regards

 

Matt.

[Cassie]

Hi there! Thanks for the kind words ?

 

Looks like you're using Nuxt. We have some example templates here, sometimes SSR is a little fiddly. 

 

https://stackblitz.com/@gsap-dev/collections/gsap-nuxtjs-starters

 

You might just need to wrap your registerPlugin so it doesn't run on the server side? Let me know if this helps at all.

if (typeof window !== 'undefined') {
  gsap.registerPlugin(ScrambleTextPlugin);
}

 

[matt2211]

Hi Cassie,

Thank you very much for your prompt reply.

 

I tried solving the issue using your suggestion, but unfortunately, I had no luck ?

 

To give you a bit more context, the problem occurs when I push to the pipeline. During the build phase, it seems the module is never added to the node_modules folder.

 

Any idea?

Thank you very much for your time and help!

[Cassie]

A few questions - How are you building it, where are you deploying it to, and how is the build accessing your token?

[Cassie]

Oh! And can you run a build successfully locally?

[matt2211]

1. I am building it using a gitlab-ci.ymlfile with the command npm run generate.
2. I am trying to deploy it to a private GitLab repo.
3. I tried:
   1. Using the .npmrc method, exposing my token.
   2. Using the variable, passing it to the script into the.npmrc file.
   3. The zip file method.
4. Locally, it works like butter ?.

[Rodrigo]

Hi,

 

In Nuxt 2 you need to setup the config file in order to tell Nuxt to transpile GSAP, like this:

export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ['gsap'],
  },
};

You can check this starter template using Nuxt2:

https://stackblitz.com/edit/nuxt-starter-xvx9ux?file=nuxt.config.js

 

Hopefully this helps.

Happy Tweening!

[matt2211]

Hi Rodrigo,

 

thanks for your reply.

I already have the  below code into mynuxt.config.js file, but it didn't solve the issue for the PROD site.

 build: {
    postcss: {
      postcssOptions: {
        plugins: {
          'postcss-import': {},
          'tailwindcss/nesting': {},
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
    transpile: ['gsap'],
  },

Locally, it is working with and without having the transpile Array.

[matt2211]

Not sure if this could help debugging my case, but that's what is happening into my gitlab-ci.ymlfile:

 

# This file is a template, and might need editing before it works on your project.
# Full project: https://gitlab.com/pages/plain-html 
# Content from the folder p will be available as a file share which should be not indexed by crawlers but no guarantee is given

image: node:19.0
  
before_script:
- echo $PLAUSIBLE_URL
- echo PLAUSIBLE_URL=$PLAUSIBLE_URL >> .env
- cat .env
- npm install
  
cache:
paths:
- node_modules/
  
pages:
script:
- npm run generate
# comment out for now to save on pipeline minutes
# https://docs.gitlab.com/ee/user/project/pages/introduction.html#serving-compressed-assets 
- find public -type f -regex '.*\.\(htm\|html\|txt\|text\|js\|css\)$' -exec gzip -f -k {} \;
- find public -type f -regex '.*\.\(htm\|html\|txt\|text\|js\|css\)$' -exec brotli -f -k {} \;
  
artifacts:
paths:
- public
only:

- production-site
- /^gat-.*/

 

I also tried to pass the following code:
[MY TOKEN] - is my actual exposed token.

 

always-auth=true

//npm.greensock.com/:_authToken=[MY TOKEN]

@gsap:registry=https://npm.greensock.com

 

into the before_script like so:

 

before_script:

- echo always-auth=true > .npmrc
- echo //npm.greensock.com/:_authToken=[MY TOKEN] >> .npmrc
- @gsap:registry=https://npm.greensock.com >> .npmrc

 

and also using a variable, passing it from GitlLab:

before_script:

- echo always-auth=true > .npmrc
- echo //npm.greensock.com/:_authToken=${GSAP_TOKEN} >> .npmrc
- @gsap:registry=https://npm.greensock.com >> .npmrc

[Rodrigo]

Hi,

 

Unfortunately I don't have any experience with GitLab's pipelines so I couldn't really tell you about that.

 

Are you getting the right values for the token when using a environmental variable?

 

Also I'm curious about the fact that you tried the .tgz file route and didn't worked. Since you're using a private repo that should work as expected as far as I know. Maybe delete your .npmrc file, uninstall the GSAP package, delete your package-lock.json file and then install using the .tgz file you can find in your download from your account's dashboard. Then modify your yaml file in order to use that route.

 

Finally is worth noticing that when using the transpile flag in the build config object there is no need to import from the dist folder, just import regularly:

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

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

Hopefully this helps.

Happy Tweening!

[matt2211]

Thanks Rodrigo,

 

followed all the above steps, and still working 100% fine locally, but when I try to push it to PROD, the pipeline fails.
 

• .npmrc approach error:

ERROR in ./pages/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js)

Module not found: Error: Can't resolve 'gsap/ScrambleTextPlugin' in 'pages'

• zip apporach error:

$ npm install ./gsap-bonus.tgz
npm WARN tarball tarball data for file:gsap-bonus.tgz (null) seems to be corrupted. Trying again.
npm WARN tarball tarball data for file:gsap-bonus.tgz (null) seems to be corrupted. Trying again.
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /builds/ssgat/w3/dev_gatwebsite/gsap-bonus.tgz
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/builds/ssgat/w3/dev_gatwebsite/gsap-bonus.tgz'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2024-07-05T15_52_19_851Z-debug-0.log

 

?

[Cassie]

I'm not sure what else we can advise really. Would you be able to give @Rodrigo or I a simplified down repo via DM?

[Rodrigo]

Mhh, yeah that error looks odd, basically the pipeline can't find the file you're using for installing GSAP and I assume the file is in your repo, so basically this boils down to the instruction being given to the pipeline. Have you contacted GitLab support so they can guide you a bit regarding this? I think that with the tgz file and this particular error they would be able to help you better than we.

 

As Cassie mentions if you can share some information or allow access to your repo until this is solved that would be great.

 

Happy Tweening!

[matt2211]

Hi guys,
 

First of all, thank you so much for your time, help, and advice!!

I finally got it working! ?

 

Honestly, I'm not entirely sure why, but after countless attempts, each with a slight change, advice from you, or something I tested, the pipeline finally succeeded.
 

For now, I've used the .npmrc approach. I passed the token as a variable from GitLab, simplifying it from ${GSAP_TOKEN} to ${GSAP} (not entirely sure if that made any difference), then I used the following command in the before_script section of my .gitlab-ci.yml file:

npm install gsap@npm:@gsap/shockingly

followed by:

npm install

And importing/using it as advised by you:

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

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

I will keep experimenting and see how things go, and I will also try the zip file approach again.
 

In the meantime, I will enjoy this success!

Thanks again for your support! ?

 

[Cassie]

THRILLED for you and entirely baffled as to why you were having issues.