sybilrondeau

I did nothing, @Cassie did ! But be aware, as she said, it can also break the installation as it will be ok for gsap but not the other packages, so it's not so much a good solution for everybody.

Hi ! I put this line : registry=https://npm.greensock.com in the .npmrc file and it worked ! But Cassie said it could fail because of the other packages... so I deleted it and now each time I push on Github it's still working. Have you tried it ?

Well I pushed again on Github and it seems it is still working...

Ok, thank you for your help !

Hi @Cassie ! I tried with the tips on your previous post and it worked ! Why did you delete it ? With registry=https://npm.greensock.com added to the .npmrc

Thank you, this guy has the exact same error... I'll see there if they found a solution.

hi @Gr0x, I am exactly in the same situation. Did you find out how to deploy ?

When I use the private registry, how should I import the files ? In static ? Or just : import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger.js' ?

Ok So I tried doing the private registry and what @Prasanna said about deploying in Netlify but I got this now : 10:34:21 PM: Installing NPM modules using Yarn version 1.22.4 10:34:22 PM: yarn install v1.22.4 10:34:22 PM: [1/4] Resolving packages... 10:34:23 PM: [2/4] Fetching packages... 10:34:24 PM: error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.1.tgz: Request failed \"403 Forbidden\"".

But thoses files are in gitignore too so... it's normal it can't resolve the path ?!

So now I have all gsap files in static folder (gsap, ScrollTrigger, DrawSVGPlugin and MorphSVGPlugin). I had the scripts in the head : script: [ { src: '/MorphSVGPlugin.min.js', body: true }, { src: '/ScrollTrigger.min.js', body: true }, { src: '/gsap.min.js', body: true }, { src: '/DrawSVGPlugin.min.js', body: true }, ], and I import them like this in a file or component, for example : import { gsap } from '~/static/gsap.min.js'; import { ScrollTrigger } from '~/static/ScrollTrigger.min.js'; gsap.registerPlugin(ScrollTrigger) I works fine in dev mode. But on Netlify I have this error : 9:15:51 PM: $ yarn generate 9:15:51 PM: yarn run v1.22.4 9:15:51 PM: $ nuxt generate 9:16:16 PM: [fatal] Nuxt build error 9:16:16 PM: ERROR in ./components/BasePortrait.vue?vue&type=script&lang=js& (./node_modules/@nuxt/webpack/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!./components/BasePortrait.vue?vue&type=script&lang=js&) 9:16:16 PM: Module not found: Error: Can't resolve '~/static/DrawSVGPlugin.min.js' in 'components' @ ./components/BasePortrait.vue?vue&type=script&lang=js& (./node_modules/@nuxt/webpack/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!./components/BasePortrait.vue?vue&type=script&lang=js&) 21:0-62 22:20-33 9:16:16 PM: @ ./components/BasePortrait.vue?vue&type=script&lang=js& 9:16:16 PM: @ ./components/BasePortrait.vue 9:16:16 PM: @ ./node_modules/.cache/nuxt/components/plugin.js 9:16:16 PM: @ ./node_modules/.cache/nuxt/index.js 9:16:16 PM: @ ./node_modules/.cache/nuxt/client.js 9:16:16 PM: @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js 9:16:16 PM: ERROR in ./components/TheNavBar.vue?vue&type=script&lang=js& (./node_modules/@nuxt/webpack/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!./components/TheNavBar.vue?vue&type=script&lang=js&) 9:16:16 PM: Module not found: Error: Can't resolve '~/static/MorphSVGPlugin.min.js' in 'components' And so on... with all gsap files. Should I try @Prasanna method instead ? Going back with the tgz file ? I am lost ?

Hi ! My repo is public so I can't have this file in it. My questions are : - do I really need it ? (as I use the plugins bonus minified files in the static folder) - and if the answer is yes, how can I do ?

Hi I have the same issue (error "gsap-bonus.tgz": Tarball is not in network and can not be located in cache) when deploying on Netlify. I understand that it is because the file is not on my github repo and that's ok because it should be private. But I use the js minified bonus files in the static folder of Nuxt. So I wonder if I really need the tgz file in the first place because I already use the plugins files in static. So I tried to remove the tgz file and install a regular yarn add gsap instead but I have an error each time... So how should I do ? I am a little lost with all that... If I need the tgz and put it in a private repo on github, how to I link it to my project ? Regards.

Thank you very much for your time ! That's so obvious now ! Yes as it is my first step into the framework there is certainly a lot to care of . Thank you again !

oh yes sorry I didn't push the last work. I do it now !

this is the repo on Github : https://github.com/sybilrondeau/sybrlab-Nuxt First steps for me on NuxT - Vue.js...

Hi ! Node version is V16.0.0. This is the code in the component I try to test. I didn't use $refs but actual classes. I tried with /dist or with file in the /static folder. Same error with convertToPath method. <script> import { gsap } from 'gsap/dist/gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; import IconButton from './icons/IconButton.vue'; import IconLab from './icons/IconLab.vue'; import { MorphSVGPlugin } from '~/static/MorphSVGPlugin.min.js'; gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin); export default { components: { IconLab, IconButton, }, data() { return { isOpen: false, }; }, mounted() { const circle = MorphSVGPlugin.convertToPath('.circle'); this.navTl = gsap .timeline() .to(circle, { morphSVG: '.close-btn' }) .reverse(); }, methods: { openNav() { // toogle play and reverse on timeline this.navTl.reversed(!this.navTl.reversed()); this.isOpen = !this.isOpen; // class active on menu items function activeMenu(trigger, end, targets) { ScrollTrigger.create({ trigger, start: 'top bottom', end, toggleClass: { targets, className: 'active' }, }); } activeMenu('#section2', 'bottom 20%', '.nav-about'); activeMenu('#section3', 'bottom 20%', '.nav-portfolio'); activeMenu('#section4', 'bottom 20%', '.nav-skills'); activeMenu('#section5', '200% 20%', '.nav-contact'); }, }, }; </script>

Everything is working fine in dev mode, it's just when I run Jest. I tried what you said, still doesn't work... same error.

So I tried using import gsap from 'gsap/dist/gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; import { MorphSVGPlugin } from 'gsap/dist/MorphSVGPlugin'; and now it failed on the converToPath method. Any idea ? Details: /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/MorphSVGPlugin.js:12 import { getRawPath, reverseSegment, stringToRawPath, rawPathToString, convertToPath as _convertToPath } from "./utils/paths.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module

Thank you for your help ! Unfortunately it's the same. I don't understand how it should be done... I shouldn't have to transpile gsap as I don't use SSR but Static rendering. (according to the doc).

Hi, I am trying to test a Nuxt app with jest. But on files with gsap, I have an error : Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it. • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. Details: /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/ScrollTrigger.js:650 export var ScrollTrigger = /*#__PURE__*/function () { ^^^^^^ SyntaxError: Unexpected token 'export' 43 | <script> 44 | import { gsap } from 'gsap'; > 45 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; | ^ 46 | import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'; 47 | import IconButton from './icons/IconButton.vue'; 48 | import IconLab from './icons/IconLab.vue'; I am using gsap with the gsap-bonus.tgz file. Everything is working fine expect with jest. I use Static rendering (not SSR). This is my jest config : (it's already configured with babel-jest) I tried importing gsap via dist folder, as I read in the forum. But then I still have a problem with morphSVGPlugin : Details: /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/MorphSVGPlugin.js:12 import { getRawPath, reverseSegment, stringToRawPath, rawPathToString, convertToPath as _convertToPath } from "./utils/paths.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module 11 | <script> 12 | import gsap from 'gsap'; > 13 | import MorphSVGPlugin from 'gsap/MorphSVGPlugin'; | ^ 14 | gsap.registerPlugin(MorphSVGPlugin); 15 | 16 | export default { What should I do ? module.exports = { // tell Jest to handle `*.vue` files moduleFileExtensions: ['js', 'json', 'vue'], watchman: false, moduleNameMapper: { '^~/(.*)$': '<rootDir>/$1', '^~~/(.*)$': '<rootDir>/$1', '^@/(.*)$': '<rootDir>/$1', }, transform: { // process js with `babel-jest` '^.+\\.js$': '<rootDir>/node_modules/babel-jest', // process `*.vue` files with `vue-jest` '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest', }, snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'], collectCoverage: true, collectCoverageFrom: [ '<rootDir>/components/**/*.vue', '<rootDir>/pages/*.vue', ], };

Ok I understand !! Thank you very much !

Hi I have this button in a Vue.js app and I don't understand why the close action take more and more time to perform. Can you help ? Regards. Sybil

I found out ! I simply forgot to save the state of the third slide.