[Bug]: ESM-only stylelint plugins fail to import with Yarn PnP #464
Comments
kherock
changed the title
|
@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 prettierjust make sure it created a |
|
I have same issue trying to use Stylelint 16. Seems like their API is now deprecating all common-js plugins and extensions. I don't think using Stylelint modules directly for Yarn ESM PnP is viable. We may need to spawn stylelint as a process. This most likely need a parser similar to SublineLinter-Stylelint's that convert each message to a warning object |
|
I managed to create a hybrid PnP + node_modules setup for my project so I can migrate to the latest First install yarn workspace third-party add -DE stylelint stylelint-config-standard-prettier stylelint-config-standard-scss # ...
# yarn add -DE stylelint stylelint-config-standard-prettier stylelint-config-standard-scss # ... For the configuration, you can use Yarn's Update (3/27/24): // stylelint.config.js
import { createRequire } from 'module';
import path from 'path';
const require = createRequire(
process.env.INIT_CWD ?? // leave out if not mirroring setup for running stylelint CLI with Yarn node
path.join(process.cwd(), 'packages/third-party/node_modules')
);
/** @type {import('stylelint').Config} */
export default {
extends: [
require.resolve("stylelint-config-standard-scss"),
require.resolve("stylelint-config-prettier-scss"),
]
};Set the library path in {
"stylelint.stylelintPath": "packages/third-party/node_modules/stylelint",
}The above setup should work in VSCode and running stylelint CLI. |
That's basically the same hack @guitartsword suggested and isn't a solution. This issue makes |
|
Yeah that is indeed a workaround. Right now the only way for Yarn to resolve ESM modules is using their node loader. Unfortately, that would require to support runtime as its own process and forwarding , which is how |
|
With the Node 20.6 #!/usr/bin/env node
const {existsSync} = require(`fs`);
const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const relPnpLoaderPath = "../../../../.pnp.loader.mjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require stylelint
require(absPnpApiPath).setup();
register(relPnpLoaderPath, pathToFileURL(__filename))
}
}
// Defer to the real stylelint your application uses
module.exports = absRequire(`stylelint`);The extension tells me that |
|
@kherock Electron 29 uses Node.js 20.9.0. |
This comment was marked as outdated.
This comment was marked as outdated.
This comment has been minimized.
This comment has been minimized.
|
@Mouvedia I'm referring to the rest of the error output. here's the error after formatting the stack |
|
I got this to work in VSCode 1.90 after unplugging #!/usr/bin/env node
const {existsSync} = require(`fs`);
const {createRequire, register} = require(`module`);
const {resolve} = require(`path`);
const {pathToFileURL} = require(`url`);
const relPnpApiPath = "../../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require stylelint
require(absPnpApiPath).setup();
if (isPnpLoaderEnabled && register) {
register(pathToFileURL(absPnpLoaderPath));
}
}
}
// Defer to the real stylelint your application uses
module.exports = absRequire(`stylelint`);and in my VSCode "stylelint.stylelintPath": ".yarn/sdks/stylelint/lib/index.cjs",Maybe it's time for yarn to reintroduce a stylelint SDK with the register hook added in yarnpkg/berry#6219? |
|
I have the same issue with PNPM And I am using this ESM config https://github.com/radum/stylelint-config Running the CLI works just fine. |
|
I am running into the same issue with a module. Anyone knows if this is getting addressed? |
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:
The only way to hook into Node's ESM resolution is to pass
--loaderas a CLI arg or inNODE_OPTIONS.Link to Minimal Reproducible Example
https://github.com/kherock/vscode-stylelint-yarn-esm-bug
Code Snippet
No response
Stylelint Configuration
Extension Configuration
No response
Actual Behaviour
When Stylelint or a Stylelint plugin attempts to import ESM during server startup, an
ERR_MODULE_NOT_FOUNDerror is thrown.Expected Behaviour
The Stylint extension should check for a
.pnp.loader.mjsfile for Yarn projects and configure all spawned child processes to use Yarn's ESM resolution via the--loaderoption (which is supported on all non-EOL'd Node.js versions).Logs
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
The text was updated successfully, but these errors were encountered: