If I remembered correctly, the first attempt I did with Yarn migration was in July of this year. Yarn v2 was still in beta at that time and boy, it was a whole new world: Everything broke!

I am very meticulous when it comes to updates and I make sure that I update to the latest available version because there might be critical bug fixes and/or performance improvements. But the downside is, it’s not nice to have the latest version when it breaks stuff, just like when I first fiddled with Yarn v2.

The new version of Yarn introduced Plug n’ Play where instead of having node_modules in your project, which is a notorious bloat in your project, you can have a cache of your dependencies and can be resolved via the .pnp.js file. This is a great feature because depending on how many dependencies you have, you can have around 30-50 Mb cache folder compared to around 180-250 Mb node_modules folder. It also leverages the ability to have Zero Install because you download the cache of your dependencies, you can install them even without an internet connection.

The problem is, not all modules support PnP yet and it is expected that most project will have errors, mostly in the resolution of where you dependencies are located. A good example for this scenario is Webpack. Versions 4 and below will need a plugin called pnp-webpack-plugin so that your loaders and plugins can resolve via PnP.

Aside from apps, editors like VS Code will need to have the sdk so that it could locate your linting dependencies via PnP.

So, I abandoned it for a while until this month when Webpack released v5. At this time, I was thinking that if I’m going to upgrade to the latest Webpack, I might as well upgrade to the latest Yarn. I’ll bite the bullet and figure out how to make them work. There was an announcement by Arcanis, the lead developer of Yarn, before that once they release Yarn v2, Yarn v1 will be in maintenance mode.

When I started coding, the biggest caveat I had before was to fiddle it directly on my working branch which is a careless thing to do. Once I messed up the working branch, it would be impossible for me to merge it with the main branch which will force me to delete the repository and start all over again. I’ve learned my lesson and created new branches for experimental things. Locally, I’ve set up folders so that I could differentiate the experimental ones from the working ones.

For the migration, I’ve set up 2 different folders. One for Webpack v5 while the other one was for Yarn v2. While Webpack updated their documentation for the new Webpack, I was still confused on how to properly configure it.

A few days ago, I chanced upon an article from Sindre Sorhus titled Webpack 5 Headache and it was posted in the Javascript Reddit as well. I forgot which article in the Javascript Reddit I found the solution to my Yarn problem but it was in this words (non-verbatim): If you’re not confident in using PnP, just enable nodeLinker: "node-modules" in .yarnrc.yml until you are ready to use PnP.

That was it!

I tried it on my experimental Yarn folder and everything was working just like in Yarn v1. I was still using the latest version of Webpack v4 when I migrated to Yarn v2. Although I can’t take advantage of PnP just yet, at least I can get the new commands and the speed of it.

What I learned from this migration:

1. They are not forcing you to update immediately

They stopped distributing Yarn globally and wants its users to upgrade on a case by case basis. You can use Yarn however you want. Not confident in using Yarn v2? No problem! You can still receive security updates from the classic Yarn. Want to be a daredevil? Go ahead, by all means! Install the new version of Yarn.

2. Read the docs

It’s really helpful to read the docs. The migration guide really helped me a lot during the upgrade. That doctor feature is quite nice to try out.

3. Look up in public forums and see if a solution has been provided

Reddit, Javascript communities, Stack Overflow, or just the plain Google search. Somebody should encounter the same problem as you and a solution might be provided.

4. Look for issues in the repository and see if another user encountered the same problem

If you can’t find the solution you’re looking for, try the Github Issues board. People report a lot of problems there and a solution might be provided as well.

5. Be patient

There is no rush in upgrading to Yarn v2. As stated above, upgrading to the next version is on a case-by-case basis.

Update:

I have already took advantage of Yarn’s PnP as I’ve migrated to Webpack v5+, which will be my next blog post.