Jump to content
GreenSock

thefalconlab

Bonus Plugins problem on netlify

Recommended Posts

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.

 

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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 ?

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 😕

 

 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

With the registry, you should use import.

 

This post has some tips on netlify.

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 10 months later...

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 :)

  • Like 1
Link to comment
Share on other sites

  • 2 months later...
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!

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×