[Bug]: ESM-only stylelint plugins fail to import with Yarn PnP

[Kyle Herock]

How did you encounter this bug?

The stylelint-prettier extension recently refactored its code to use Prettier's ESM entrypoint in prettier/stylelint-prettier#305. Yarn's PnP resolution does support ESM, but this comment from #272 is not completely true as it only pertains to CJS modules:

Just calling our setup function from within the script that will perform the require should be enough - it'll inject the runtime within the process and the rest (like the zip accesses via fs) is transparent.

The only way to hook into Node's ESM resolution is to pass --loader as a CLI arg or in NODE_OPTIONS.

Link to Minimal Reproducible Example

https://github.com/kherock/vscode-stylelint-yarn-esm-bug

Code Snippet

No response

Stylelint Configuration

extends:
  - stylelint-prettier/recommended

Extension Configuration

No response

Actual Behaviour

When Stylelint or a Stylelint plugin attempts to import ESM during server startup, an ERR_MODULE_NOT_FOUND error is thrown.

Expected Behaviour

The Stylint extension should check for a .pnp.loader.mjs file for Yarn projects and configure all spawned child processes to use Yarn's ESM resolution via the --loader option (which is supported on all non-EOL'd Node.js versions).

Logs

[Debug - 12:54:17 p.m.] [language-server] Resolved Stylelint using PnP | path: "/Users/herockk/Workspaces/example-project/.pnp.cjs"
[Debug - 12:54:17 p.m.] [language-server] Running Stylelint | options: {"ignoreDisables":false,"reportDescriptionlessDisables":false,"reportNeedlessDisables":false,"reportInvalidScopeDisables":false,"ignorePath":"/Users/herockk/Workspaces/example-project/.stylelintignore","code":"...","codeFilename":"/Users/herockk/Workspaces/example-project/packages/react/error-page/style.scss"}
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prettier' imported from /Users/herockk/Workspaces/example-project/.yarn/__virtual__/stylelint-prettier-virtual-333ffca36b/0/cache/stylelint-prettier-npm-4.0.2-013484b286-b60112c10b.zip/node_modules/stylelint-prettier/stylelint-prettier.js
Did you mean to import prettier-npm-3.0.0-7ffbcce680-6a832876a1.zip/node_modules/prettier/index.cjs?
    at new NodeError (node:internal/errors:387:5)
    at packageResolve (node:internal/modules/esm/resolve:957:9)
    at moduleResolve (node:internal/modules/esm/resolve:1006:20)
    at defaultResolve (node:internal/modules/esm/resolve:1220:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ESMLoader.import (node:internal/modules/esm/loader:528:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1119:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:438:21) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Stylelint Version

v15.10.1

vscode-stylelint Version

v1.2.4

Node.js Version

v16.20.1

Operating System

macOS Ventura 13.4.1

Windows Subsystem for Linux

No response

Code of Conduct

• I agree to follow vscode-stylelint's Code of Conduct

[Bryan Thomas]

@kherock Have you found a workaround or an alternative?

[Isaias Valle]

@kherock Have you found a workaround or an alternative?

I have a workaround:

# inside your yarn PnP project folder
cd ..
yarn init
yarn config set nodeLinker node-modules
yarn add prettier

just make sure it created a node_modules folder and not using PnP