matt2211 Posted Monday at 07:15 PM Share Posted Monday at 07:15 PM 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. Link to comment Share on other sites More sharing options...
Cassie Posted Monday at 08:25 PM Share Posted Monday at 08:25 PM 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); }  Link to comment Share on other sites More sharing options...
matt2211 Posted Monday at 08:56 PM Author Share Posted Monday at 08:56 PM 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! 1 Link to comment Share on other sites More sharing options...
Cassie Posted Monday at 09:06 PM Share Posted Monday at 09:06 PM A few questions - How are you building it, where are you deploying it to, and how is the build accessing your token? Link to comment Share on other sites More sharing options...
Cassie Posted Monday at 09:06 PM Share Posted Monday at 09:06 PM Oh! And can you run a build successfully locally? Link to comment Share on other sites More sharing options...
matt2211 Posted Monday at 09:20 PM Author Share Posted Monday at 09:20 PM I am building it using a gitlab-ci.ymlfile with the command npm run generate. I am trying to deploy it to a private GitLab repo. I tried: Using the .npmrc method, exposing my token. Using the variable, passing it to the script into the.npmrc file. The zip file method. Locally, it works like butter 🧈. Link to comment Share on other sites More sharing options...
Rodrigo Posted Monday at 11:18 PM Share Posted Monday at 11:18 PM 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! Link to comment Share on other sites More sharing options...
matt2211 Posted Tuesday at 03:33 AM Author Share Posted Tuesday at 03:33 AM 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. Link to comment Share on other sites More sharing options...
matt2211 Posted Tuesday at 03:36 AM Author Share Posted Tuesday at 03:36 AM 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted Tuesday at 03:32 PM Share Posted Tuesday at 03:32 PM 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! Link to comment Share on other sites More sharing options...
matt2211 Posted 45 minutes ago Author Share Posted 45 minutes ago 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  🥹 Link to comment Share on other sites More sharing options...
Cassie Posted 16 minutes ago Share Posted 16 minutes ago 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? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now