Why yarn creates a .pnp.loader.mjs and .pnp.cjs files

Question

I use vite on react, and when i use yarn to "live server" my project two new files are created, .pnp.loader.mjs and .pnp.cjs. What is the purpose of this files? I never see those files, always use npm or yarn and is the first time that they appear.

Ventriloquism

Any update on this one? – Cecilia

yarnpkg.com/features/pnp – Deanery

The doc doesn't mention the .pnp.loader.mjs. – Indictable

Answer 1

The .pnp.cjs is part of the Yarn Plug'n'Play process, which makes our install and runtime much faster. It makes the node_modules obsolete.

Yarn also creates an experimental ESM loader which is called .pnp.loader.mjs.

Mestas

The doc doesn't mention the .pnp.loader.mjs. – Indictable

So I assume that we also commit .php.loader.mjs to git along with .pnp.cjs right? – Gromyko

I included both the .pnp.cjs and .pnp.loader.mjs script in my Git repo. You can think of the .pnp.loader.mjs as the core Yarn plug'n'play worker script. The .pnp.cjs script gets updated with package updates. Whether or not the hosting service that is used with the repo rebuilds those files from scratch when loading the app or not is hard to tell. My guess is that it uses the files available. – Protuberate

Answer 2

If you do not want the .pnp.cjs to be created, create a .yarnrc.yml file in the root directory, add : nodeLinker: node-modules

Lavallee

Answer 3

npx create-next-app@latest
npx next dev

The issue is from Yarn @Jan Willems says

Heteronomy

any links for the disucssion? – Engross

I use the official documentation and instead to follow the Yarn setup, I’m following the NPM setup – Heteronomy