>> Prateek

← Back

React/Yarn4

Yarn 4 introduces several advancements and features that enhance the developer experience. It requires Node.js 18+ and has made significant changes like not enabling Zero-Install by default and using Corepack over yarnPath.

We can use yarn 4 with react js by following these steps. Must be Yarn 4 check yarn version yarn -v: yarn version

Now we will create a React Project:yarn create react-app my-app

React Project Structure

Unlike in previous version of yarn,we used to have node-modules but yarn 4 comes with Plug'n'Play and Zero-Installs. it contains 2 new files:

  • .pnp.cjs
  • .pnp.loader.mjs

.pnp.cjs file contains info about all the package that mentioned in package.json

Plug N Play is faster than node-modules but some times due to some dependencies issue ,it might not work for some projects

With Yarn 4 we can still use node-modules Just we have to paste this command:yarn config set nodeLinker node-modules it will create a file name :.yarnrc.yml which contains: node-linker

Now doing yarn install:yarn install will bring back node_modules folder changes:

changes we will find that .pnp files are deleted

ReactYarn4PnP