Jump to content
Search Community

Member plugin error in Vite on Netlify deploy

896terv8iygaedv test
Moderator Tag

Go to solution Solved by b1mind,

Recommended Posts

I'm getting an error on the members-only DrawSVGPlugin when I deploy to Netlify.

I'm using Astro, which builds the site with Vite. Everything works fine on my local instance.

 

I've followed Greensock install instructions. Screenshot of my npmrc is attached.

npmrc.thumb.png.0acc74ae62dec20d701fd0afd51d8b0f.png

 

I can see gsap and DrawSVGPlugin.js in /gsap in node_modules:
node.png.39ccdcd8a850ba3b474a4c6d91935007.png

 

My script in Astro:
 

<script>
  import { gsap } from "gsap";
  import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
  gsap.registerPlugin(DrawSVGPlugin);

  gsap.from(".designer-text svg path", {
    delay: 0.8,
    duration: 1.125,
    stagger: 0.125,
    drawSVG: "0%",
  });
</script>

 

Locally, the script is working fine.

Netlify Deploy Message:
netlify.thumb.png.e79a3f754362f0ffb513f9e236dd42df.png


I have also tried import from gsap/dev... but this did not work either. Exact same error.

I can of course load the plugin as an external script but would like to solve the issue and stay consistent with imports and npm.


Any help is appreciated.

Link to comment
Share on other sites

Howdy @896terv8iygaedv. I'm not familiar with Vite, but according to this thread, you might need to import from the /dist/ directory:

 

You said "I have also tried import from gsap/dev" - did you mean to type gsap/dist? In other words:

// instead of this
import DrawSVGPlugin from "gsap/DrawSVGPlugin";

// do this (to get ES5/UMD files instead of ES Modules):
import DrawSVGPlugin from "gsap/dist/DrawSVGPlugin";

Also, @Rodrigo suggested setting an environment variable here:

 

According to this thread, @Prasanna suggested deleting the .npmrc file in the project then running the following commands (don't forget to replace the <your-auth-token> with the correct token):

 

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


Hopefully something I posted above is helpful :) Thanks for being a Club GreenSock member! 💚

  • Like 1
Link to comment
Share on other sites

This is quite a bear to deal with. First, yes I did mean /dist.

I have tried the solutions to no avail.

 

And actually, the last solution from @Prasanna is getting a new error message from Netlify:
image.thumb.png.7b35172b0e0ba53b85bdd4216c7a6aaa.png

 

I generated a new Auth Token.

I have several times deleted and recreated .npmrc
I've run npm cache clean --force
I've cleared cache and deployed from netlify
I have run both:

npm install @gsap/shockingly
npm install gsap@npm:@gsap/shockingly


I'm not sure why my current token (which is in my npmrc) is not connecting with my shockingly subscription.

image.png

Link to comment
Share on other sites

OK, I am now back to the original error message.

 

While debugging, I wound up with an extra line in package.json
 

  "dependencies": {
    "@astrojs/tailwind": "^3.0.1",
    "gsap/shockingly": "^3.11.4"
    "astro": "^2.0.16",
    "gsap": "npm:@gsap/shockingly@^3.11.4",
    "swup": "^3.0.5",
    "tailwindcss": "^3.2.7"
  }

Removing "gsap/shockingly": "^3.11.4" got Netlify to stop complaining about an authentication mismatch.

Now I'm back to [vite]: Rollup failed to resolve import "gsap/DrawSVGPlugin"

Screenshot 2023-03-16 at 4.21.23 PM.png

Link to comment
Share on other sites

Leaving another update.

I changed directions and tried the Zip installation method instead of Private Registry: https://greensock.com/docs/v3/Installation#ZIP
 

As expected, the result is the same.

A core team member of Vite and Astro implies here that this is likely an issue on GSAP's end, but there doesn't seem to be much reason given:
https://github.com/vitejs/vite/issues/2789
 

It does link here https://publint.bjornlu.com/gsap@3.10.4 and states the "GSAP doesn't export files properly" as of June 2022. Not sure what to make of that.

Is Greensock doing anything behind the scenes with accessing these private plugin files that I am not able to see?

In my simplistic view, the private files are in node_modules/gsapDrawSVGPlugin and therefore should be accessible with

import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

 

That is exactly what works for non-membership plugins. For example, I am loading ScrollTrigger.js in this manner. Deploy runs fine. No problem.
 

What is it in the membership plugins that is different?

Link to comment
Share on other sites

oddly enough I think things have changed ever so slightly you need to include the file extension .js as well as point to /dist/

	import { gsap } from 'gsap'
	import { DrawSVGPlugin } from 'gsap/dist/DrawSVGPlugin.js'
	gsap.registerPlugin(DrawSVGPlugin)

Try this and see if it helps. It's what I'm doing in Vite/SvelteKit and seems to work. Also deployed to Netlify with .npmrc and env var, though I see you got that part working 🎉

 

Update: Just to confirm I had to retest. It does indeed need the .js at the end. While Vite in development work fine without it, when it builds its being missed (Rollup issue?). I do get a msg from vsCode telling me it can't find type definition for the module but it works.

 

does this have to do with the registering or just another one those ESM/CJS quirks? 

Link to comment
Share on other sites

@b1mind I changed the file path and appended filtetype, but no dice.

However, what did you mean by "AND env var"?  I've set the .npmrc file per GSAP install instructions. But I haven't set an env file or added env to Netlify. I know how to add the auth to Netflify env, but now how to access it once that's done (or if doing this even matters as the GSAP instructions don't mention it and I'm not doing SSR).

Link to comment
Share on other sites

Interesting, when I "clear cache and deploy" on Netlify, I'm now back to it complaining that it can't match my "shockingly" subscription to auth i.e. build fails because it can't authenticate.

 

Soooo, I'm guessing the filepath changes I've been pushing COULD work, but I don't know since Netlify is using some cached files.

I need to fix this authentication issue. Not sure how.

 

image.png

Edited by 896terv8iygaedv
image pasted twice accidently
Link to comment
Share on other sites

  • Solution
2 minutes ago, 896terv8iygaedv said:

@b1mind I changed the file path and appended filtetype, but no dice.

However, what did you mean by "AND env var"?  I've set the .npmrc file per GSAP install instructions. But I haven't set an env file or added env to Netlify. I know how to add the auth to Netflify env, but now how to access it once that's done (or if doing this even matters as the GSAP instructions don't mention it and I'm not doing SSR).

Can you run a build locally and preview then maybe show the error?  Are you using a framework with Vite? Do you have a repository you could share? (make sure you don't have your auth exposed, read below)

 

You don't want to put your auth code for gsap right in your .npmrc as it would be public in your repo (same with .env never upload to your repo for build steps) so you use an env var on the server side like so. 

 

package.json

"gsap": "npm:@gsap/shockingly@^3.11.1"

 

.npmrc

always-auth=true
@gsap:registry=https://npm.greensock.com
//npm.greensock.com/:_authToken=${GIT_TOKEN}

 

image.thumb.png.e296721e050e1fd7141f26dc62455829.png

  • Thanks 2
Link to comment
Share on other sites

@b1mind You're a saint for sticking with me. Thank you!

To summarize for any others that happen upon this thread.

I'm using Astro.js framework. Hosting on Netlify. Astro uses Vite.

My issue was two-fold.

1. I needed to follow @b1mind's advice and create a .npmrc file in my project root dir, not my system's home dir, as I had been doing. Secondly, I needed to add the GSAP auth code as an ENV in Netlify. Finally, I needed to edit my .npmrc file exactly as @b1mind described it (of course using whatever your Netlify ENV name is e.g. GSAP_TOKEN, NPM_TOKEN etc)

2. Now onto the Vite issue. @b1mind is also correct that the files need to a) be import from dist and b) have the filetype appended. This means do:

import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin.js";

and NOT:

import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

 

Alright, that's it! Hope this helps someone else.

Edited by 896terv8iygaedv
mispelling
  • Like 5
Link to comment
Share on other sites

  • 9 months later...

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.
×
×
  • Create New...