Extending eslint-plugin-svelte/recommended throws a Converting circular structure to JSON error

[GeoffreyBooth]

Using "extends": "plugin:eslint-plugin-svelte/recommended" with [email protected] throws a Converting circular structure to JSON error. Perhaps something related to legacy vs flat config?

Steps to reproduce

Create a new blank SvelteKit app and answer the prompts as shown:

npx sv create app
┌  Welcome to the Svelte CLI! (v0.6.10)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  No
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  npm

Now add xo:

cd app
npm install xo --save-dev
npm init xo
npx xo # Runs successfully, and reports 9 lint errors

So far so good, but we aren’t linting Svelte files yet. Let’s add eslint-plugin-svelte@next (the @next is for Svelte 5 support) and configure xo to use it:

npm install --save-dev eslint-plugin-svelte@next
touch .xo-config.json

Edit the newly created .xo-config.json to include the following, adapted from https://github.com/sveltejs/eslint-plugin-svelte#configuration:

{
	"extensions": ["svelte"],
	"plugins": ["svelte"],
	"overrides": [
		{
			"files": "**/*.svelte",
			"extends": "plugin:eslint-plugin-svelte/recommended",
			"processor": "svelte/svelte",
			"envs": ["browser"]
		}
	]
}

Now npx xo returns:

/private/tmp/app/node_modules/eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2156
                const formattedValue = JSON.stringify(error.data);
                                            ^

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'plugins' -> object with constructor 'Object'
    |     property 'svelte' -> object with constructor 'Module'
    |     ...
    |     property 'base' -> object with constructor 'Array'
    --- index 0 closes the circle
Referenced from: BaseConfig

Removing the "extends": "plugin:eslint-plugin-svelte/recommended" line makes the error go away, but linting of Svelte files breaks.

[GeoffreyBooth]

As a workaround, I replaced .xo-config.json with this .xo-config.cjs:

const eslintPluginSvelte = require('eslint-plugin-svelte');

/** @type {import('xo').Options} */
const config = {
	extensions: ['svelte'],
	plugins: ['svelte'],
	overrides: [
		{
			files: ['*.svelte', '**/*.svelte', '**/*.svelte.js', '*.svelte.js'],
			processor: 'svelte/svelte',
			parser: 'svelte-eslint-parser',
			envs: ['browser'],
			rules: Object.assign({}, ...eslintPluginSvelte.configs.recommended.flatMap(({rules}) => rules)),
		},
	],
};

module.exports = config;

This works, by replacing the extends line with a programmatically generated rules object.

The above bears little resemblance to the example configuration described in eslint-plugin-svelte‘s documentation at https://github.com/sveltejs/eslint-plugin-svelte#configuration (simplified):

import eslintPluginSvelte from 'eslint-plugin-svelte';
export default [
  ...eslintPluginSvelte.configs.recommended,
];

Perhaps xo should align with the new style of eslint config files, or there should be more documentation and examples in xo’s docs of how to translate configurations such as this one into xo’s config file schema.

[GeoffreyBooth]

Update: There’s an issue with the workaround, in that it doesn’t work with https://github.com/xojs/vscode-linter-xo, the xo extension for Visual Studio Code. As of today, VS Code runs Node.js 20.18.1 internally, which doesn’t support require of an ES module; and the 3.x version of eslint-plugin-svelte is ESM-only. Presumably when VS Code updates to a newer version of Node this issue will resolve itself, but in the meantime I can’t get lint hints in my editor.

The require of ESM that causes the crash is to eslint-plugin-svelte/lib/index.js from eslint/node_modules/@eslint/eslintrc/dist/eslintrc.cjs. The @eslint/eslintrc package is dual-published ESM and CommonJS, but the stack trace includes the CommonJS version because the package is being loaded as a dependency of eslint, which is CommonJS-only. I’m not sure how to resolve this, other than to wait for a VS Code update.

[spence-s]

Thanks - this is a known issue related to the eslint 9/flat config upgrade as we are still waiting for dependents of xo to become compatible. I think the last blocker is the eslint prettier config we rely on for prettier support.

The update is a long time WIP and thanks for your patience 🙏🏻

[GeoffreyBooth]

Thanks so much for your work on this library. I dug through the code to try to find a fix to propose but I came up empty.

I don’t use Prettier; is there a way to use this updated xo without Prettier support, but hopefully with support for flat config and ESM dependents?