No.16

What happened to yarn pnp?

Snark
Snark

About two months ago, eslint stopped working. After some googling, I easily found others facing the same issue.

All of them (including me) had upgraded their vscode to v1.90 and were working with yarn pnp projects.

eslint-prettier-plugin & synckit

The problem started with eslint-prettier-plugin and synckit, which the plugin depends on. The role of eslint-prettier-plugin is to reconcile ESLint and Prettier. Because eslint rule and prettier config are partially overlap, this plugin makes eslint follow the prettier config.

Speaking of synckit, more closely related to the problem, makes an asynchronous workerThread synchronous. The plugin uses synckit to create a synchronous worker that formats source code.

Let's get to the point..

What beautiful coincidence caused this mess?

In VSCode v1.90, electron was updated to version 29 and because Electron includes Node.js runtime, the Node.js version has updated to 20 as well.

And here comes one last piece. The experimental-loader cli flag.

ESM & experimental-loader

Since v12 Node.js supports both module systems of CommonJS and ES Module, nodejs announced experimental-loader that can be used to customize module importing. (Now it's replaced to --import)

The experimental-loader is used widely on packages that need module compatibility, yarn pnp mode and the synckit. However, there is a bug in node 20 and that causes it to ignore the loader flag when Node starts new worker thread.

This is exactly what happend under the hood of the plugin. Because the Node included in vscode runs the eslint-prettier-plugin extension, it leads to the malfunction of Synckit.

This is a very shortened version of whole story. But if you're interested, take a look the related issues and Node.js documentations. I'm quite sure it's worth your time 🙃

ESM loaders cannot be defined via Worker option execArgv in v20

The --loader flag is ignored

Node.js docs #--experimental-loader


More Stories

ScreenMate for mac