DEV Community

Cover image for React JS with Yarn 4
Prateek Wayne
Prateek Wayne

Posted on

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

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.