Yarn Berry & Render Deployment

It's Spring 2022, and after watching Ryan Dahl’s Node regrets video, I went down a rabbit hole of pnpm, Plug’n’Play (PnP), and node_modules. I was fascinated. As a result, I decided to upgrade to yarn 3 to use PnP.

This was close to three years after the official maintainers announced Yarn Berry (Yarn 2+). I knew I would face some obstacles—not even Meta was willing to move away from Yarn 1, and they created Yarn!—but I figured more experienced devs would have answers by now. Honestly, I haven’t had any issues except when I had to deploy to Heroku. After a simple script change, the deployment worked just fine—or it did until Heroku's free tier went bye-bye-bye.

I tried a couple of free alternatives, but they either didn't support Yarn at all or only supported Yarn 1. I tried Render and yarn install didn't throw an error, so I was hopeful...until it came to yarn start and Render wasn’t having it:

Expected package location: /opt/render/.cache/express-npm-4.18.2-bb15ff679a-3c4b9b0768.zip/node_modules/express/

I went on a scavenger hunt to find an answer to my problem, but couldn't seem to find one. My fruitless search results made me wonder if I built dreams on false hopes. But a good developer knows frustration kills progress, so I shook it off and restarted my Google search. I found one possible solution, but it looked promising.

A quick lesson on how Yarn PnP works--and why the cache folder is important. Yarn Berry doesn’t install node_modules like npm and/or Yarn 1 do. Instead, it stores the node_modules zip files of your project inside <project_dir>/.yarn/cache (if locally). This new feature keeps the size of the projects using Yarn Berry on the small side as it only installs the dependencies the project needs.

Back to my issue, the OP had the same error as I did. Fortunately for my project, using Render's shell, they noticed a discrepancy in the paths Render was using. At build time, Render installed the files needed to run under /opt/render/project/. Then, at run time, it was looking for said files under /opt/render/.cache--which was empty. In simple terms, Render was looking for packages one level too high.

The published solution was quite simple, and it ended up fixing my problem. Go to your Dashboard > Environments > and add the following [key, value] pair: YARN_CACHE_FOLDER, ~/project/src/.yarn/cache. That's it. This new path will redirect Render to the correct folder, and your project will start without a hitch.

Happy coding :)