PhpStorm with Yarn PnP (What doesn’t work)

Recently, I decided to use the React Starter Kit on GitHub for a project and wanted to spice things up by using Yarn with PnP. It sounded cool and cutting-edge, but oh boy, did I run into some headaches with PhpStorm!

The Bumpy Start

So, there I was, all set with my fancy Yarn PnP setup, but PhpStorm just wasn’t playing nice. Here’s what went wrong:

1. PhpStorm couldn’t see the packages I installed with Yarn.
2. ESLint and TypeScript were completely out of whack.

This was super annoying because, without PhpStorm recognizing my packages, things like autocomplete were just dreams. And who wants to code in TypeScript without all those helpful hints and tips?

The SDKs

After scratching my head for a bit, I stumbled upon a neat trick: using Yarn’s SDKs. I ran this command in my project:

yarn dlx @yarnpkg/sdks base

It was like giving PhpStorm a pair of glasses! I then told PhpStorm to look at the paths in .yarn/sdks for TypeScript and ESLint. TypeScript and ESLint started working again. Sweet!

Even after this cool fix, PhpStorm still wasn’t recognizing my Yarn packages. No autocomplete meant coding TypeScript felt like trying to cook without tasting – possible, but not as fun.

When All Else Fails, Go Classic

After a lot of Googling and trying all sorts of things, I waved the white flag and went back to the good old node_modules method. I changed my .yarnrc.yml with this:

nodeLinker: node-modules

And just like that, PhpStorm was back to its old self, autocomplete and all.

Wrapping Up

So, what did I learn? Possibly nothing, considering the time invested. Probably this – Sometimes, the newest tech isn’t always the smoothest path, especially when your tools aren’t ready for it. Don’t be afraid to mix the new with the old if it gets the job done.

Happy coding, everyone! Keep exploring and learning, and remember, every problem is just a new adventure in coding land!