Bonus Plugins problem on netlify

[sybilrondeau 8 Likes (Newbie)]

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.

 

[Cassie 5,372 Likes (Superhero)]

Hi Sybil, Is the .tgz file being commited? Maybe you're ignoring .tgz files in your gitignore?

if so you can add this to your gitignore file
 

!gsap-bonus.tgz

 

[sybilrondeau 8 Likes (Newbie)]

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 ?

[OSUblake 18,491 Likes (Superhero)]

2 hours ago, sybilrondeau said:

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

 

Are you importing gsap? If so, then you would have to change your imports to point to that folder. If you are just putting the scripts in the head, then you really don't need the tgz.

 

[Prasanna 85 Likes (Contributor)]

Hey @sybilrondeau, it's easier to deploy if you use the private npm package in your project. You can add the same in your project by running the following commands:

$ npm config set @gsap:registry https://npm.greensock.com/
$ npm config set //npm.greensock.com/:_authToken <your-auth-token>
$ npm install @gsap/business
$ npm install gsap@npm:@gsap/business

 

If you want to deploy the same to netlify, then you can follow the instructions that I have mentioned here: 

 

 

On the other hand, if you wish to use the .tgz files, then you need to add the .tgz file to your project and push the same to git.

[sybilrondeau 8 Likes (Newbie)]

3 hours ago, OSUblake said:

 

Are you importing gsap? If so, then you would have to change your imports to point to that folder. If you are just putting the scripts in the head, then you really don't need the tgz.

 

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 😕

 

 

 

 

[sybilrondeau 8 Likes (Newbie)]

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

[OSUblake 18,491 Likes (Superhero)]

If you're putting the scripts in the head, then you wouldn't use import as the files would be global. So you would just register any plugins.

gsap.registerPlugin(ScrollTrigger)

 

But of course if your files aren't committed, then it can't resolve the path.

 

Have you tried to doing the private registry.

 

 

 

[sybilrondeau 8 Likes (Newbie)]

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\"".

 

[sybilrondeau 8 Likes (Newbie)]

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' ? 

[OSUblake 18,491 Likes (Superhero)]

With the registry, you should use import.

 

This post has some tips on netlify.

 

[sybilrondeau 8 Likes (Newbie)]

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

[Alex.Marti 10 Likes (Newbie)]

Hello,

 

[EDIT] Sorry I posted without reading all the posts... My bad.

I will first read all the tips and come back if I still can't deploy on Netlify

[skylarkitchen 0 Likes (Newbie)]

On 8/29/2020 at 10:37 PM, GreenSock said:

@timthewebguy We have been working on doing something like that, yes. Not quite ready for prime-time, but we're getting close. If you'd like to be a beta tester, let us know. And thanks for being "Shockingly Green"! 

I'd love to be a beta tester!

[GreenSock 18,569 Likes (Superhero)]

Hi @skylarkitchen. Thanks for being a Club GreenSock member! 

 

No need to beta test - we've offered a private NPM repo for well over a year now, probably close to two.   You can use it now. No beta testing necessary. Instructions are on the install page. Get your token from your account dashboard anytime.