React JS with Yarn 4

prateekwayne

Prateek Wayne

Posted on May 18, 2024

React JS with Yarn 4

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

💖 💪 🙅 🚩
prateekwayne
Prateek Wayne

Posted on May 18, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React JS with Yarn 4
react React JS with Yarn 4

May 18, 2024