Netlify Deploy failed with GSAP Business Accounts

[egstad]

I've scoured all the suggested threads and have followed these docs explicitly, but netlify continues to not build.

 

I'm running a Nuxt 3 site on Netlify.

my .npmrc:

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

 

that token is then added as a netlify variable. I can confirm that it is correct.

i've cleared netlify cache and rebuilt many times, no dice.

 

[OSITAKA]

I am having the same problem:

 

3:25:47 PM: [2/4] Fetching packages...

3:25:47 PM: error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fbusiness/-/business-3.12.3.tgz: Request failed \"403 Forbidden\"".
 

 I've generated a new token and the problem still persist.

[Cassie]

Hey folks. Sorry about this. Sounds frustrating.

I tried to debug for you, but I stepped through the process and my site built deployed first time. Are you using npm? Can you give me any more info?

[Cassie]

Is it working locally for you? Just an issue when deploying?

[OSITAKA]

Hi @Cassie Thank you for the reply.

 

For me it works locally, no problems.

 

When I am deploying to netlify I get this error below. This just happened to me today, it was working without problems a few days ago.

Here's my log:
log.txt
 

Thank you

[Cassie]

Heya, thanks for that log.

Are you using yarn locally or npm?

This line is giving me a little red flag, I wonder if you're using npm locally and then yarn on Netlify?

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

 

There's a known issue with yarn and private registries - it's discussed in this thread. So maybe these steps from @Prasanna might help?

If you are using npm locally and yarn on Netlify I'd suggest setting up Netlify to use npm commands instead.

[egstad]

2 hours ago, Cassie said:

Is it working locally for you? Just an issue when deploying?

I am using npm for both local and production (netlify) dependencies. 

I've recorded a loom that walks through my issue. hope it helps!

 

Thanks for your help @Cassie!

[OSITAKA]

@Cassie and @egstad:

 

I've removed the `package-lock.json` file and the `yarn-lock.json` file and it's working again ?

 

I think in my case the problem was when I installed a new dependency a few days ago...

 

Thank you for the help!

 

Happy tweening

[Cassie]

Hey Jordan,

 

little sidenote - that token won't just automatically pull from the .env file - you have to set your environment up to manage them, I think this is the right way in nuxt.
https://github.com/nuxt-community/dotenv-module

 

Otherwise - I'm not seeing any GSAP specific errors in that netlify log. Your issue isn't a 403 with the private repo, the issue is here -

Cannot find module @rollup/rollup-.... npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try npm i again after removing both package-lock.json and node_modules directory

 

Here's a thread. Sorry I can't help more here!

 

https://github.com/nuxt/nuxt/issues/25006

[Rodrigo]

Hey Jordan,

 

Sorry about the issues. I just created a new Nuxt project with NPX and the GSAP Business package without any issues:

https://github.com/rhernandog/nuxt3-gsap-bonus-netlify/tree/master

 

https://calm-torte-bf0b7c.netlify.app/

 

Maybe you could try a brand new project like mine, create your npmrc file with the token for installing locally (before pushing to the repo), then replace the token with the environmental variable and then push to the repo and run the deploy in Netlify. Then you could copy/paste your files into this project.

 

As Cassie suggests, maybe ditch the .env files in your setup and just use the npmrc file as I suggested: use the token for installing locally, then update with env variable you'll use in netlify and only then push to the repo.

 

PS: I removed the loom link because you were showing your private token at some point in the GSAP installation page (not the npmrc file).

 

Hopefully this helps.

Happy Tweening!

[egstad]

Appreciate your help, @Rodrigo + @Cassie!

I've managed to get netlify to build, however there is a runtime error with gsap.
 

{"url":"/","statusCode":500,"statusMessage":"","message":"gsap$1.registerPlugin is not a function","stack":""}

 

Is this still the proper way to use split text?
 

gsap.registerPlugin(SplitText);

Edited May 13, 2024 by egstad

[Cassie]

This may be down to the fact that nuxt is doing the build on the server - are you checking whether you're running registerPlugin client side?

Something like this depending on your setup

if (process.client) {
  gsap.registerPlugin(SplitText)
}

or

if (typeof window !== 'undefined') {
  gsap.registerPlugin(SplitText)
}

 

[Cassie]

We have some demos here!

https://stackblitz.com/@gsap-dev/collections/gsap-nuxtjs-starters

[egstad]

We're cooking with gas. Thanks again, @Cassie!

[Cassie]

Wahay!