Error when using gsap/shockingly with pnpm

[gaggo]

Hi there! I'm using pnpm as my package mangager. If I install gsap initially, everything works fine:

 

pnpm install gsap@npm:@gsap/shockingly

But when I then do anything like, for example, try to install a completely unrelated package:

 

pnpm install @swup/route-name-plugin

I'm getting the following (fatal) error. I can't install anything anymore.

 WARN  Package name mismatch found while reading {"integrity":"sha512-JoZp6iYvOC+wkwl8zfXSqSrYCcuzTntaULCL08YMa1vonrYcr9D0K3EUe9PNpw7FYK1chjSwjjgcw3zS/O2SWg==","tarball":"https://npm.greensock.com/@gsap/shockingly/-/shockingly-3.12.5.tgz"} from the store. This means that the lockfile is broken. Expected package: gsap@3.12.5. Actual package in the store by the given integrity: @gsap/shockingly@3.12.5.
 ERR_PNPM_ERR_PNPM_UNEXPECTED_PKG_CONTENT_IN_STORE  The lockfile is broken! A full installation will be performed in an attempt to fix it.
 ERR_PNPM_UNEXPECTED_PKG_CONTENT_IN_STORE  Package name mismatch found while reading {"integrity":"sha512-JoZp6iYvOC+wkwl8zfXSqSrYCcuzTntaULCL08YMa1vonrYcr9D0K3EUe9PNpw7FYK1chjSwjjgcw3zS/O2SWg==","tarball":"https://npm.greensock.com/@gsap/shockingly/-/shockingly-3.12.5.tgz"} from the store. This means that the lockfile is broken. Expected package: gsap@3.12.5. Actual package in the store by the given integrity: @gsap/shockingly@3.12.5.

When I switch to npm, the issue does not occur – but I'd really like to make use of pnpm as it saves a lot of disk resources. Any help would be much appreciated.

[GSAP Helper]

 I'm not familiar with pnpm, but perhaps this thread will help: 

Or maybe: 

 

[gaggo]

Hi @GSAP Helper, sorry for my silence. None of the linked issues are leading me to a solution to my problem.

[gaggo]

Just found this issue on pnpm GitHub: https://github.com/pnpm/pnpm/issues/4724. The issue looks exactly like what I'm experiencing. 

It seems like the problem does not happen with other premium packages from a custom registry.  I'm afraid I can't test this with another premium package, since GSAP is the only one I'm using. Any help would be much appreciated – until then I'm forced to continue using classic npm with all it's millions of duplicate files on my computer

[GSAP Helper]

Yeah, that seems like a pnpm issue so I'm not sure what to tell you, but it'd probably be a lot simpler for you to just switch to installing the tarball (.tgz) file. Download the zip from this site, open it up and take the gsap-bonus.tgz file from the "npm-install-this" folder, drop it into your project folder, and then you can simply run "npm install ./gsap-bonus.tgz" (or maybe you can replace "npm" with "pnpm" there). 

[gaggo]

I don‘t necessarily think this is a pnpm issue, as it seems to be working with other premium package as described in the issue.

 

but it‘s also no biggie. Thanks for your help and the tip with installing gsap from the zip file!

[gaggo]

I just noticed in an older project I'm using this in my package.json:

 

"gsap": "npm:@gsap/member@^3.8.0",

That project also runs on pnpm and doesn't have any issues. Maybe there actually IS something wrong with the @gsap/shockingly package?

I'd be grateful if someone from the core team could take a look at this. 

[tn-nb]

I got a similar error after installing the business package. You'll need to run this command to wipe the old gsap libs from pnpm store and then reinstall your repo.

pnpm store prune && pnpm install

 I'm assuming the packages are under the same namespace or something like that. Here is a thread about it:

https://github.com/pnpm/pnpm/issues/4724

[gaggo]

Thanks for your suggestion @tn-nb!

 

Pruning the store every time I install kind of defeats the purpose of pnpm though. The store is what makes pnpm so fast.

 

also the other „solution“ suggested in that issue (adding `node-linker=hoisted` to the .npmrc) basically reverts one of the great features of pnpm.

 

for now, I went with the suggestion by @GSAP Helper and used the gsap-bonus.zip. This feels a bit un-ideal as I won‘t automatically get any bug fix releases that way, but it‘s the next best thing to just using classic npm IMO.

 

As I‘m paying for a greensock membership, I‘d love to hear a statement of Jack or someone else from the core team. 

[GreenSock]

Hi @gaggo Yeah, I apologize but I don't really know what the issue could possibly be with pnpm or how to resolve it. Our private repo expert has said that yarn itself also has some bugs related to private repositories that they haven't fixed in a long time. Unfortunately we don't have control over yarn or pnpm. I really wish I had a great answer for you. 🤷‍♂️ If anyone has suggestions, we're all ears of course. 

 

Thanks for being a Club GSAP member! 💚

[gaggo]

Actually that‘s an absolutely great answer Jack. It‘s good to have an „official“ reply to this.

 

Thanks for posting! 

[Prasanna]

@gaggo I believe this problem is caused by the pnpm not handling package name aliases properly. Unfortunately this problem is a bug in pnpm at the moment. I'll try to find a workaround, will comment here if successful.