Yarn Berry: Switch from from node_modules to PnP

[kachkaev]

Continues #160, replaces #29

---

Key steps:

1. Edit .yarnrc.yml:

   -nodeLinker: node-modules
   +nodeLinker: pnp

2. Run

   rm -rf node_modules
   rm -rf cli/node_modules ## specific to this project

3. Update .gitignore and other *ignore files:

   -node_modules
   +.pnp.*

   It might be worth keeping node_modules for some time if you expect to switch between PnP and non-PnP branches.

4. Run

   yarn install
   yarn dlx @yarnpkg/sdks vscode

5. Remove nodeLinker: pnp from .yarnrc.yml (doing this in step 1 breaks yarn install in step 2).

6. Add require("@rushstack/eslint-patch/modern-module-resolution"); and parserOptions: { tsconfigRootDir: __dirname }, to .eslintrc.js – see https://www.npmjs.com/package/@rushstack/eslint-patch. Thanks to @merceyz for the tip!

7. Track Picking a different typescript.tsdk from a list / use in a multi-root workspace with yarn2 pnp microsoft/vscode#108866 and don’t use multi-root workspaces in VSCode until resolved

   • Workaround: one VSCode window → only one project folder 🙁

8. Track yarn2 Vercel build failed - No Next.js version could be detected in your project vercel/vercel#5280 for a permanent fix of Next.js deployment to Vercel

   • From Vercel’s knowledge base: https://vercel.com/knowledge/does-vercel-support-yarn-2

     Serverless Functions and SSR (Server-side Rendering) will not work with Yarn 2.

   • Case study: [Case Study] Vercel+nextjs PnP compatibility yarnpkg/berry#2031

   • Workaround: Add FORCE_BUILDER_TAG=canary in Vercel dashboard

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/kachkaev/njt/7qTQ5QxYp6S39Db3nrMUhvBTvmFG
✅ Preview: https://njt-git-yarn-pnp-kachkaev.vercel.app

[merceyz]

Hoist ESLint plugins

You can add https://github.com/microsoft/rushstack/tree/9c81203c95dcfab1631e9fd12913c7a3681d7360/stack/eslint-patch to your ESLint config to fix their resolution instead

[kachkaev]

styled-components/styled-components#3082

[kachkaev]

yarnpkg/berry#1427 (comment)

[kachkaev]

Great, thanks for your tip @merceyz! Adding require("@rushstack/eslint-patch/modern-module-resolution"); to .eslintrc worked like a charm! I updated the migration instruction in the first comment and mentioned you there.

If you have any other tips, please fell free to share! 🙌

[rauchg]

I see you're using Vercel! What are things we could do to support PnP better on our platform, if any? Thanks in advance.

[kachkaev]

👋 @rauchg! Unfortunately Vercel does not currently support Yarn PnP. Here are some links I could dig out while working on this PR:

• yarn2 Vercel build failed - No Next.js version could be detected in your project vercel/vercel#5280.

• From Vercel’s knowledge base: https://vercel.com/knowledge/does-vercel-support-yarn-2

    > Serverless Functions and SSR (Server-side Rendering) will not work with Yarn 2.  
  

• Case study: [Case Study] Vercel+nextjs PnP compatibility yarnpkg/berry#2031

As a workaround proposed in vercel/vercel#5280 (comment), I had to set FORCE_BUILDER_TAG=canary in the Vercel dashboard. It works, but I guess what it does is setting YARN_NODE_LINKER=node-modules to turn off Yarn PnP.

I hope PnP will get some priority this year because Yarn installs are significantly faster without node_modules. For you at Vercel this means happier customers and smaller infrastructure bills 😁

Looking at the state of my experiment (this PR), I’m somewhat sure that PnP will start setting off in 2022. Tooling support was way worse a year ago when I started, but it’s pretty much there now!

[kachkaev]

Mission complete! 🕺

https://twitter.com/kachkaev/status/1488630228842917891