WTF is Yarn Plug'n'Play (PnP)?

Ian Jones
InstructorIan Jones
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

Yarn PnP is a new feature set on by default with yarn 2. PnP gets rid of your projects node_modules in favor of a .pnp.js file.

This .pnp.js file maps all of the packages installed in your project to where Yarn has placed them on your disk. This enables faster, more reliable installs because you don't have to write to disk as often.

Instructor: [0:00] Plug'n'Play is a new feature set on by default in Yarn 2. It tries to solve the problems that the community has run into with Node modules.

[0:10] Node module directories often take a lot of disk space. Generating them can sometimes take more than 70 percent of the time during a Yarn install. There are other issues that you can read about on Yarn's documentation site.

[0:30] Yarn tries to solve these issues by creating a .pnp.js file. This file is generated instead of Node modules. If I head over to VS Code, I'm running Yarn 2, all I've done is initialize package.json. When I yarn add xstate, they log out all of my packages. You can see that a .pnp.js file has been created as well as the usual yarn.lock file.

[1:03] You'll notice that the Node module's directory hasn't been created. This .pnp file replaces the Node module directory. This file points Node to the location where these Node modules have been installed.

[1:19] As an example, we'll hop over to our .pnp file, and you can see here that the package location is ./ and the package dependencies are xstate. Since I have a local install of Yarn 2, not a global one, Yarn has created this .yarn file, and this is where all of my npm packages will be installed.

[1:54] As you can see, this is our xstate package. It's a zip, but if you review in Finder and unzip, you'll see that it contains a Node modules folder with xstate.

~ 47 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today