pnpm install a library inside micro frontend - pnpm

I am using pnpm workspaces with turborepo, and I'm having issues installing packages.
I want to install a package only for a certain application/workspace, eg. portals/cashout
Whenever I do
pnpm install lodash
It would warn me that this would be global workspace, which is not what I need.
I need something like
pnpm install lodash --workspace=portals/cashout

You can use filtering
To filter by path:
pnpm add lodash --filter=./portals/cashout
To filter by package name, you can specify the name of the package. For instance:
pnpm add lodash --filter=cashout
You can also just change the directory to portals/cashout and run installation there.

Related

Install a dependency and save to package.json for a sub-package in yarn workspaces

I am trying to use Yarn Workspaces for my app that I am splitting into multiple packages such that I can share code between the mobile and web version of the app. Let me explain what I am trying to do with an example.
Let's say I currently have a mobile app called awesome-app. I am refactoring it by taking out the shared code and creating three packages as follows:
awesome-web
awesome-mobile
awesome-shared
Let's say I want to add new functionality to awesome-mobile for which I have to install depA to awesome-mobile. How can I do that such that yarn only installs depA and updates the package.json for the awesome-mobile. I tried using command yarn package <package-name> add depA but it ended up installing all the dependencies again which I want to avoid.
Also, let's say I want to use awesome-shared in awesome-web. Is there a yarn command such that it installs and updates the package.json for awesome-web automatically. Currently, I do it by hand and then I do yarn install in the root folder which ends up installing all the dependencies again.

Why pnpm has two stores when using with nvm?

I did found pnpm is using two stores when installed in nvm environment.
/Users/me/.pnpm-global/1
/Users/me/.nvm/versions/node/v10.15.3/pnpm-global/1
Trying to understand, why it is so.
~/.pnpm-global is not the store. It is the location where the global packages are installed. For instance, when you run pnpm i -g webpack-cli, webpack will be installed into ~/.pnpm-global.
It is probably some bug that you have two of those. There should be one global folder, probably this one only: /Users/me/.nvm/versions/node/v10.15.3/pnpm-global/1
The global store is located at ~/.pnpm-store

How do I install vuetify directly from github?

When I try with
npm install vuetifyjs/vuetify#v1.5.2
I get "Cannot find package".
UPDATE:
There is a packages folder under which there is a vuetify directory.
I tried npm installing that folder. Everything appeared to go well until I started the dev server.
Now in the console log I see:
[Vuetify] Multiple instances of Vue detected
Seems to be related to https://github.com/vuetifyjs/vuetify/issues/4068 but I cannot tell what the solution is at this point.
I had the same issue to use my own version of Vuetify, waiting for my pull request being accepted.
Here what I did:
I build the vuetify project with my fix.
yarn
yarn build
Then I took the content of 'packages/vuetify' and put it in a new git repository. I remove the .gitignore to be able to commit built files (/es5, /lib, /lib-temp, /dist)
Finally I add this git repository to my project to replace my vuetify version:
npm install git+https://gitlab.com/GITLABUSERNAME/REPOSITORYNAME.git
Looking at the package.json file, the package doesn't have a name property, which it would need to have for you to be able to install it from GitHub.
So the short answer is that you can't install vuetify directly from GitHub via npm.
However, you can install it directly from npm:
npm install vuetify#1.5.2
You can't install vuetify directly from GitHub but you can edit code in 1 component node_modules/vuetify/lib/components/VSlider/VSlider.js Then, you install patch-package and execute path package vuetify Delete node modules and execute yarn to create new node modules Last, yarn serve, you see your code is work
https://www.npmjs.com/package/patch-package

How do I keep yarn workspaces dependencies in sync

Let's say I have multiple packages in my yarn workspaces.
#mycompany/utils
#mycompany/app
#mycompany/serv
Let's say each of these packages has a dependency on lodash. I want to make sure that they all have the same lodash version.
Is there a way to do that in each of the package.json?
Use syncpack to force all sub-packages in a monorepo uses the same version of each dependency.
Install in the root package.json:
yarn add --dev -W syncpack
Run (Recommnded: Run on every commit using husky):
syncpack list-mismatches
More info: https://github.com/JamieMason/syncpack

How to remove a package from pnpm store, or force re-download it?

I use pnpm to manage npm project, and I modified the content of an installed package by accident, say, I cleared the content of node_modules/jquery/dist/jquery.js.
The problem is no matter how i reinstall jquery(pnpm install jquery), the content of this file is always empty. I even tried to delete jquery from pnpm store ~/.pnpm-store/, but that doesn't work(maybe I deleted wrong package)
Finally, I have to delete all the files in ~/.pnpm-store, to download everything, it fixes my problem, but I want to know if there is any easier way to do it.
{ My answer will cover pnpm v2.16.2 }
Short answer: run pnpm install --force. (pnpm update might work as well)
Long answer. When you just run pnpm install, pnpm compares the wanted shrinkwrap file (project/shrinkwrap.yaml) to the current one (project/node_modules/.shrinkwrap.yaml). They equal in your case, so node_modules is not touched.
When --force is used, packages are reverified and relinked from the store. Reverification means that its integrity is checked. You removed a file from jquery, so verification will fail and the package will be reunpacked to the store and relinked to node_modules.
Alternatively, you could remove your project's node_modules and run pnpm install. That would also check the integrity of jquery before linking it to the store.
That being said, I think pnpm install jquery should also probably verify the integrity of jquery. We'll create an issue for this in the pnpm repo.
And maybe we can add some additional commands for reverifying every package in node_modules and re-unpacking all modified dependencies.
A related command currently available is pnpm store status which prints a list of mutated packages

Resources