Installing GSAP Business to Vite project registry error

[henk.bonana]

I have seen many posts about problems installing gsap/business (or club) Tried everything, read all threads, abused ChatGPT, watched the installation but without luck.

I have a vite project with GSAP/business installed, locally everything works offcours but when I want to deploy I get the following error:

 

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@gsap%2fbusiness - Not found

 

This is because it wants npm.greensock.com as registry and not registry.npmjs.org. Should be easy right? I have tried this:

• removed package-lock.json and clean install
• removed node_modules folder and clean install
• added .npmrc to root of folder
• added .npmrc to use_level on machine
• setting registry through bash
• uninstalled every version of GSAP (gsap/react, gsap, gsap/business) and installed only business
• used the .tgz npm installation file to see if this works (no luck)
• searched my machine for https://registry.npmjs.org/@gsap%2fbusiness to manually remove it

I don't know what to do or try, nothing seems to work.

 

 

 

[Cassie]

Hey there! Sorry to hear you're struggling.

Where are you deploying to?

[henk.bonana]

17 hours ago, Cassie said:

Hey there! Sorry to hear you're struggling.

Where are you deploying to?

I'm deploing to Hubspot CMS. Don't know if this gives you some more to go on? I think the main problem is the registry url being npmjs instead of npm.greensock. Should be something from my end and not Hubspot.

[Cassie]

I'm just trying to work out why it would be working locally and not when you deploy. There are a few things that are confusing me here.

 

Quote

used the .tgz npm installation file to see if this works (no luck)

This 100% should work. The tgz file just install files directly - no registry, no token.

If it's working locally but not when you deploy, there's something happening in the deployment side - how are you handling the GSAP token on hubspot? Is it similar to how folks handle it on Netlify? (Sorry I don't have experience with Hubspot)

Also could you show me what your package.json looks like? Maybe you have multiple references to GSAP which is why the .tgz didn't work?

[henk.bonana]

When I try to deploy with the gsap-bonus.tgz I get the following:

[INFO]   aug. 15 3:30:07AM EDT  Archiving and Zipping Project Source 
[INFO]   aug. 15 3:30:14AM EDT  Uploading Project Source Archive 
[ERROR]   aug. 15 3:30:18AM EDT  npm WARN tarball tarball data for gsap@file:gsap-bonus.tgz (null) seems to be corrupted. Trying again. 
[ERROR]   aug. 15 3:30:18AM EDT  npm WARN tarball tarball data for gsap@file:gsap-bonus.tgz (null) seems to be corrupted. Trying again. 
[ERROR]   aug. 15 3:30:18AM EDT  npm notice  
[ERROR]   aug. 15 3:30:18AM EDT  npm notice New major version of npm available! 8.19.4 -> 10.8.2 
[ERROR]   aug. 15 3:30:18AM EDT  npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.8.2> 
[ERROR]   aug. 15 3:30:18AM EDT  npm notice Run `npm install -g [email protected]` to update! 
[ERROR]   aug. 15 3:30:18AM EDT  npm notice  
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! code ENOENT 
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! syscall open 
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! path /tmp/cms_kvwZaH/cms-js-renderer/gsap-bonus.tgz 
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! errno -2 
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! enoent ENOENT: no such file or directory, open '/tmp/cms_kvwZaH/cms-js-renderer/gsap-bonus.tgz' 
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! enoent This is related to npm not being able to find a file. 
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! enoent  
[ERROR]   aug. 15 3:30:18AM EDT   
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! A complete log of this run can be found in: 
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR!     /tmp/cms_kvwZaH/npmLogs/2024-08-15T07_30_16_478Z-debug-0.log 
[ERROR]   aug. 15 3:30:18AM EDT  npm install error for server dependencies 

This is the error log when I try to deploy with npm :

INFO   aug. 15 8:10:08AM EDT  Archiving and Zipping Project Source
INFO   aug. 15 8:10:15AM EDT  Uploading Project Source Archive
ERROR   aug. 15 8:10:20AM EDT  npm notice 
ERROR   aug. 15 8:10:20AM EDT  npm notice New major version of npm available! 8.19.4 -> 10.8.2
ERROR   aug. 15 8:10:20AM EDT  npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.8.2>
ERROR   aug. 15 8:10:20AM EDT  npm notice Run `npm install -g [email protected]` to update!
ERROR   aug. 15 8:10:20AM EDT  npm notice 
ERROR   aug. 15 8:10:20AM EDT  npm ERR! code E404
ERROR   aug. 15 8:10:20AM EDT  npm ERR! 404 Not Found - GET https://registry.npmjs.org/@gsap%2fbusiness - Not found
ERROR   aug. 15 8:10:20AM EDT  npm ERR! 404 
ERROR   aug. 15 8:10:20AM EDT  npm ERR! 404  '@gsap/business@^3.12.5' is not in this registry.
ERROR   aug. 15 8:10:20AM EDT  npm ERR! 404 
ERROR   aug. 15 8:10:20AM EDT  npm ERR! 404 Note that you can also install from a
ERROR   aug. 15 8:10:20AM EDT  npm ERR! 404 tarball, folder, http url, or git url.
ERROR   aug. 15 8:10:20AM EDT  
ERROR   aug. 15 8:10:20AM EDT  npm ERR! A complete log of this run can be found in:
ERROR   aug. 15 8:10:20AM EDT  npm ERR!     /tmp/cms_8avaL7/npmLogs/2024-08-15T12_10_18_388Z-debug-0.log
ERROR   aug. 15 8:10:20AM EDT  npm install error for server dependencies

 

My package.json:

{
  "name": "project",
  "version": "0.1.0",
  "type": "module",
  "dependencies": {
    "@hubspot/cms-components": "latest",
    "react-hubspot-form": "^1.3.7",
    "autoprefixer": "^10.4.19",
    "gsap": "file:gsap-bonus.tgz",
    "prop-types": "^15.8.1",
    "react": "^18.1.0",
    "swiper": "^11.1.1"
  },
  "devDependencies": {
    "@testing-library/react": "^13.4.0",
    "@vitejs/plugin-react": "^2.1.0",
    "jsdom": "^20.0.1",
    "sass": "^1.76.0",
    "style-dictionary": "^3.9.2",
    "vitest": "^0.24.3"
  },
  "scripts": {
    "start": "hs-cms-dev-server .",
    "test": "vitest",
    "build-tokens": "style-dictionary build"
  }
}

When I try it the npm way I have the token withing the .npmrc file. I'll change it to .env or whatever when it works but for testing i'll leave it in the .npmrc

 

[Cassie]

So just to clarify, the .tgz file install WORKS locally - but doesn't work when you deploy?

 

This is saying it can't find the file

Quote

[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! enoent ENOENT: no such file or directory, open '/tmp/cms_kvwZaH/cms-js-renderer/gsap-bonus.tgz' 
[ERROR]   aug. 15 3:30:18AM EDT  npm ERR! enoent This is related to npm not being able to find a file. 

Do you know why it might be looking in a folder called cms-js-renderer?
/tmp/cms_kvwZaH/cms-js-renderer/gsap-bonus.tgz

 

Quote

When I try it the npm way I have the token withing the .npmrc file. I'll change it to .env or whatever when it works but for testing i'll leave it in the .npmrc

Can you explain more about how your deployment process works? How is your project being built?

- Is the build running on hubspot's end and based on files you've pushed to github?

- Do you know if it's using npm? Same version as locally?
- If you run a build locally does it work?

It sounds to me like the necessary files aren't available when your deployment build is running?

i.e - the gsap-bonus.tgz isn't available
and possibly the .npmrc isn't available which is why you're getting a 404?

 

[henk.bonana]

1 hour ago, Cassie said:

So just to clarify, the .tgz file install WORKS locally - but doesn't work when you deploy?

Yes locally it works but when I deploy I get the error.

 

1 hour ago, Cassie said:

Do you know why it might be looking in a folder called cms-js-renderer?
/tmp/cms_kvwZaH/cms-js-renderer/gsap-bonus.tgz

I think Hubspot is using a tmp folder when deplying to it. I have no control over this folder and I cannot reach it.

 

1 hour ago, Cassie said:

Can you explain more about how your deployment process works? How is your project being built?

- Is the build running on hubspot's end and based on files you've pushed to github?

- Do you know if it's using npm? Same version as locally?
- If you run a build locally does it work?

It sounds to me like the necessary files aren't available when your deployment build is running?

i.e - the gsap-bonus.tgz isn't available
and possibly the .npmrc isn't available which is why you're getting a 404?

I have a project folder (sent a screenshot) with an src folder where I have the theme (Hubspot basic theme) and an app folder with my react components in it. You can deploy the theme and deploy the app separate from each other. But for GSAP we are using the app folder.

In th screenshot you see multiple .npmrc and .tgz (this was for testing)

When I use nx deploy theme it deploys the theme, if I use nx deploy app it deploys the REACT modules. When I deploy either of them it is deployed on Hubspot. The error logs I sent you are also tracked there.

I have no build command yet, only deploy. I also checked if .npmrc files are maybe ignored somewhere but this is not the case. I also put the files in every possible folder to test if the folder was incorrect.

I can't find or check what version of NPM Hubspot is using but I recon it's 8.19.4. Locally I use 10.8.2 but I can't imagine this is the problem.

I know it's a bit of a needle in a haystack ;( I'm stuck on this problem for several days now.

 

[Rodrigo]

Hi,

 

I'm far from being an expert in this areas but I do recall a large project I worked on a few years ago that used docker and I remember setting it up locally with the help from someone else who took some time to explain some stuff to me. In that regard is it possible to add to the YAML config a line to copy the file into that folder? I know that this is (or at least was) possible in docker, maybe somebody in hubspot support can give you some advice on this.

 

Also since hubspot is a CMS, maybe you can upload the .tgz file to a protected folder and point to that particular file in your YAML config file.

 

Finally if you're trying to install with the .tgz file definitely remove your .npmrc file because is no longer needed.

 

Happy Tweening!

[Cassie]

 

Quote

I have no build command yet, only deploy.

Interesting. So I was mainly asking this to figure out *what* the deploy step does. 

 

i.e. -  when I deploy to netlify, I push my changes to github - the changes on github are registered by netlify and 'npm run build' is triggered, which builds out all the components I have from the src folder into the _site folder, then the static files are deployed on netlify.

If my deployment was failing because a file wasn't found during the 'npm run build' stage, my first step would be to check that the file was pushed up to the github repo and not listed in .gitignore, then I would check what the source folder was listed in netlify's deploy setting and what the destination folder was.

 

I'm struggling to help here now because I don't know what nx deploy app does - but from the little I can see (thanks for all the screengrabs) it does seem like the issue is that the .npmrc with the registry info in, and the .tgz file are unavailable.
 

Without a better understanding of how the deploy works, I don't think I can really help much more, but maybe hubspot can? If you post a thread over there I'm happy to jump in and provide them with any extra info that might help. But this really does just seem like your files aren't being found and I'm not sure how to help with that.

 

https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers

[Cassie]

Just to check - are you using useGSAP?

https://gsap.com/resources/React/#usegsap-hook-

 

[henk.bonana]

Hey @Cassie I was away for a bit but back in action, thank you for the replies.

I have taken the time to also talk with Hubspot to see if they know more what is causing this error and how to handle it. Also asked them how it works under the hood. In my understanding when deploying the components are also build.

 

On 8/16/2024 at 11:53 AM, Cassie said:

Just to check - are you using useGSAP?

https://gsap.com/resources/React/#usegsap-hook-

 

I use useEffect in my components instead of useGSAP, this is due to some difficulties with Hubspot Islands that are needed for some React specific hooks with Hubspot components.

I'm waiting for replies on Hubspot's side, when I do I'll post it here. (https://community.hubspot.com/t5/CMS-Development/REACT-modules-nx-deploy-app-in-combination-with-GSAP-Business/td-p/1028462)

[Rodrigo]

Hi,

 

Is worth mentioning that the useGSAP hook is just a drop-in replacement for useEffect/useLayoutEffect, nothing more. You're still using useEffect/useLayoutEffect (depending if the code is executed on the server or the client) so there shouldn't be any issues as far as I can tell:

https://github.com/greensock/react/blob/main/src/index.js

 

Happy Tweening!

[henk.bonana]

On 8/22/2024 at 5:48 PM, Rodrigo said:

Hi,

 

Is worth mentioning that the useGSAP hook is just a drop-in replacement for useEffect/useLayoutEffect, nothing more. You're still using useEffect/useLayoutEffect (depending if the code is executed on the server or the client) so there shouldn't be any issues as far as I can tell:

https://github.com/greensock/react/blob/main/src/index.js

 

Happy Tweening!

Thank you for the explanation!

@Cassie I got a response back from Hubspot, they couldn't find why it wasn't installed properly besides the same we already knew (it could not find the files) They suggested to install the library from another source (github or another server) So I did and now it works
I uploaded the .tgz to my own server and installed it npm install ... after deployment all was fine. In short:

• Hubspot can't find the .tgz or .npmrc file when deploying
• I did not have a build and only deployed (so maybe with a build it does work)
• When installing GSAP from another server and not uploading it to root folder it does work

For anyone that has the same problem with GSAP in combination with Hubspot React CMS and deploying with NX, just try installing from a different source.

Thank you all for the responses and the support
 

[Cassie]

Seems very odd to me. If you deployed other files in the root could hubspot see them? I assume either there's a rule about loose files in the root (seems odd) or you've got a gitignore files that's stopping the relevant files from being uploaded.

 

Glad you got it sorted though!

[henk.bonana]

1 hour ago, Cassie said:

Seems very odd to me. If you deployed other files in the root could hubspot see them? I assume either there's a rule about loose files in the root (seems odd) or you've got a gitignore files that's stopping the relevant files from being uploaded.

 

Glad you got it sorted though!

It's indeed strange because when I use the .tgz option I upload the file in my project and I can also see the file after deployment. I also checked all .ignore files and nothing out of the ordinary.

I still want to find out why both options don't work because now it feels like a hack instead of the way it supposed to be but for now I'm just glad something works

If I do find a way or why it didn't work I will update this thread for future reference and maybe helping other people.

[Rodrigo]

Hi @DwayneGulley!

 

Do you have a question or issue regarding this subject?