Member plugin error in Vite on Netlify deploy

[896terv8iygaedv 4 Likes (Newbie)]

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.

 

I can see gsap and DrawSVGPlugin.js in /gsap in node_modules:

 

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:

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.

[GreenSock 18,566 Likes (Superhero)]

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! 💚

[896terv8iygaedv 4 Likes (Newbie)]

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:

 

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.

[896terv8iygaedv 4 Likes (Newbie)]

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"

[896terv8iygaedv 4 Likes (Newbie)]

FWIW, I am not using SSR

[896terv8iygaedv 4 Likes (Newbie)]

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?

[b1mind 68 Likes (Contributor)]

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? 

[896terv8iygaedv 4 Likes (Newbie)]

@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).

[896terv8iygaedv 4 Likes (Newbie)]

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.

 

Edited March 16 by 896terv8iygaedv
image pasted twice accidently

[b1mind 68 Likes (Contributor)]

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}

 

[896terv8iygaedv 4 Likes (Newbie)]

@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 March 17 by 896terv8iygaedv
mispelling

[GreenSock 18,566 Likes (Superhero)]

Thanks for posting your solutions, @896terv8iygaedv and @b1mind 🙌