How to use with current Visual Studio Code, which is running Node 20.18.1?

[GeoffreyBooth]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

8.57.1

What version of eslint-plugin-svelte are you using?

3.0.0-next.10

What did you do?

I’m building a SvelteKit app with Svelte 5, using xo as my linter. Since xo has its own custom config file format, it took some trial and error before I found a configuration that would let me use [email protected] with xo, but eventually I did: xojs/xo#773 (comment).

My issue is that while this works on the command line with Node 23.6.0, it doesn’t work within Visual Studio Code and with the https://github.com/xojs/vscode-linter-xo extension. I think the issue is that the version of Node within VS Code as of today is 20.18.1, which doesn’t have unflagged support for require of ES modules; and as far as I’m aware there’s no way (short of creating my own custom build of VS Code) to change VS Code’s internal Node version or what flags get passed to it. The specific error I get is Failed to load plugin 'svelte' declared in 'BaseConfig': require() of ES Module /private/tmp/app/node_modules/eslint-plugin-svelte/lib/index.js from /private/tmp/app/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs not supported.

Working my way back up the call stack, I think this error is because eslint-plugin-svelte is ESM-only; and while @eslint/eslintrc is dual-published CommonJS/ESM, its parent eslint is CommonJS-only and therefore the CommonJS version of @eslint/eslintrc is what gets loaded. In Node 23.6.0, it can require eslint-plugin-svelte; but in Node 20.18.1, with default Node flags, it can’t.

I saw #885; presumably this was intended to drop support for the versions without require(esm) support? I think the effect of that PR is that you dropped support for Node versions that could require ESM files, but some of the older Node versions need the --experimental-require-module flag to be passed. I can’t seem to find a way to enable that in the internal Node.js instance that VS Code creates to run extensions.

What did you expect to happen?

I expect there to be some way to load eslint-plugin-svelte in Node 20.18.1 without needing to pass Node runtime flags.

What actually happened?

~/app/eslint-plugin-svelte-issue/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3433
                const pluginDefinition = require$1(filePath);
                                         ^

Error [ERR_REQUIRE_ESM]: require() of ES Module ~/app/eslint-plugin-svelte-issue/node_modules/eslint-plugin-svelte/lib/index.js from ~/app/eslint-plugin-svelte-issue/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs not supported.
Instead change the require of index.js in ~/app/eslint-plugin-svelte-issue/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs to a dynamic import() which is available in all CommonJS modules.
    at ConfigArrayFactory._loadPlugin (~/app/eslint-plugin-svelte-issue/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3433:42)
    at ~/app/eslint-plugin-svelte-issue/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3304:33
    at Array.reduce (<anonymous>)
    at ConfigArrayFactory._loadPlugins (~/app/eslint-plugin-svelte-issue/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3300:22)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (~/app/eslint-plugin-svelte-issue/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3100:44) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.18.1

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/GeoffreyBooth/eslint-plugin-svelte-issue

Additional comments

I understand if you don’t support xo or the legacy eslint config file format, but I would think that the issue I’ve described here probably affects regular eslint and any Visual Studio Code eslint plugin that tries to load eslint-plugin-svelte.

Per electron/electron#44630 and https://www.electronjs.org/docs/latest/tutorial/electron-timelines#nodejs-version-support, Electron should upgrade to Node 22 sometime in the next few months. But per https://nodejs.org/api/modules.html#loading-ecmascript-modules-using-require, the feature is still flagged in current latest 22.x releases of Node.

[baseballyama]

I think you need to use eslint-plugin-svelte v2 with xo or use ESLint directly. Already ESLint v8 is EOL, therefore we don't have a plan to support this.

[GeoffreyBooth]

I think you need to use eslint-plugin-svelte v2 with xo or use ESLint directly. Already ESLint v8 is EOL, therefore we don’t have a plan to support this.

The issue with eslint-plugin-svelte v2 is that it doesn’t support Svelte 5 syntax. And even though ESLint 8 is EOL, ESLint 9 is also CommonJS-only and I would expect has the same issue.

I discovered that while I can’t change the version of Node that VS Code runs, https://github.com/xojs/vscode-linter-xo has an option xo.runtime which lets me specify the Node runtime that the extension runs. The same option is available in the eslint extension: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options

So perhaps all that’s necessary is to mention in your documentation that if folks encounter an ERR_REQUIRE_ESM error, they need to update their Node (or pass --experimental-require-module) and in VS Code, define the eslint.runtime setting to point to the system Node that’s newer than the VS Code internal one.

[baseballyama]

The issue with eslint-plugin-svelte v2 is that it doesn’t support Svelte 5 syntax.

eslint-plugin-svelte v2 supports Svelte5 syntax.

ESLint 9 is also CommonJS-only and I would expect has the same issue.

We don't get any issue on VSCode (with Node.js 20.18.1) if we use ESLint directly, and ESLint supports node 18.18.0 || ^20.9.0 || >=21.1.0 as same as this plugin. So I think we don't need to change the documentation.

https://github.com/eslint/eslint/blob/main/package.json#L217

[ota-meshi]

Thank you for posting this issue.
I think the problem is that xo doesn't support flat config.
xojs/xo#702

Our plugin v3 dropped support for legacy configs.