ESLint error on NextJs v15.5.4 with 'next/core-web-vitals' - TypeError: Converting circular structure to JSON

[PawelM-DDH]

Summary

❯ npm run lint

> [email protected] lint
> eslint .


Oops! Something went wrong! :(

ESLint: 9.37.0

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'configs' -> object with constructor 'Object'
    |     property 'flat/recommended' -> object with constructor 'Array'
    |     ...
    |     property 'plugins' -> object with constructor 'Object'
    --- property 'react-hooks' closes the circle
    at JSON.stringify (<anonymous>)
    at eval (file:///home/projects/stackblitz-starters-ftmr4o9w/node_modules/@eslint/eslintrc/lib/shared/config-validator.js:325:45)
    at Array.map (<anonymous>)
    at ConfigValidator.formatErrors (file:///home/projects/stackblitz-starters-ftmr4o9w/node_modules/@eslint/eslintrc/lib/shared/config-validator.js:316:23)
    at ConfigValidator.validateConfigSchema (file:///home/projects/stackblitz-starters-ftmr4o9w/node_modules/@eslint/eslintrc/lib/shared/config-validator.js:347:84)
    at ConfigArrayFactory._normalizeConfigData (file:///home/projects/stackblitz-starters-ftmr4o9w/node_modules/@eslint/eslintrc/lib/config-array-factory.js:695:19)
    at ConfigArrayFactory._loadExtendedPluginConfig (file:///home/projects/stackblitz-starters-ftmr4o9w/node_modules/@eslint/eslintrc/lib/config-array-factory.js:918:25)
    at ConfigArrayFactory._loadExtends (file:///home/projects/stackblitz-starters-ftmr4o9w/node_modules/@eslint/eslintrc/lib/config-array-factory.js:831:29)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (file:///home/projects/stackblitz-starters-ftmr4o9w/node_modules/@eslint/eslintrc/lib/config-array-factory.js:771:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)

with eslint.config.mjs

import { FlatCompat } from '@eslint/eslintrc';

const compat = new FlatCompat({
  // import.meta.dirname is available after Node.js v20.11.0
  baseDirectory: import.meta.dirname,
});

const eslintConfig = [
  ...compat.config({
    extends: ['next/core-web-vitals', 'next/typescript'],
  }),
];

export default eslintConfig;

if I detele next/core-web-vitals it's work fine

https://stackblitz.com/edit/stackblitz-starters-ftmr4o9w?file=package.json

Additional information

❯ next info

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Tue Oct 07 2025 04:43:28 GMT-0400 (Eastern Daylight Time)
  Available memory (MB): NaN
  Available CPU cores: 8
Binaries:
  Node: 20.19.1
  npm: 10.8.2
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.5.4 // Latest available version is detected (15.5.4).
  eslint-config-next: 15.5.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.9.3
Next.js Config:
  output: N/A

Example

No response

[LeeWxx]

I think the error happens because next/core-web-vitals includes the react-hooks plugin, and that plugin’s config references itself. When FlatCompat expands it, it creates a circular structure where the same plugin object points to itself. To fix it, don’t wrap next/core-web-vitals with FlatCompat, just register the plugins manually once and spread their rules instead.

[KaloudasDev]

Answer to: "ESLint error on NextJs v15.5.4 with 'next/core-web-vitals' - TypeError: Converting circular structure to JSON"

Hello! This circular structure error occurs because next/core-web-vitals contains self-referencing plugin configurations that conflict with FlatCompat. Here's the solution:

Option 1: Use ESLint Flat Config Without Compat Layer

// eslint.config.mjs
import next from '@next/eslint-plugin-next';

export default [
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: {
      '@next/next': next,
    },
    rules: {
      ...next.configs.recommended.rules,
      ...next.configs['core-web-vitals'].rules,
    },
  },
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'react-hooks/exhaustive-deps': 'error',
    },
  },
];

Option 2: Minimal FlatCompat Approach

// eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc';

const compat = new FlatCompat({
  baseDirectory: import.meta.dirname,
});

export default [
  {
    ignores: ['.next/**', 'node_modules/**'],
  },
  ...compat.extends('next/typescript'),
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      '@next/next/no-html-link-for-pages': 'error',
      '@next/next/no-before-interactive-script-outside-document': 'error',
      '@next/next/no-sync-scripts': 'error',
      '@next/next/no-page-custom-font': 'error',
      'react-hooks/exhaustive-deps': 'error',
    },
  },
];

Option 3: Use Next.js Built-in ESLint (Recommended)

// package.json
{
  "scripts": {
    "lint": "next lint"
  }
}

The root cause is that react-hooks plugin creates circular references when processed through FlatCompat. Using Next.js's built-in lint command or manually configuring the rules avoids this compatibility layer entirely.

[philipbushnell-valtech]

It's worth noting that option 3 isn't recommended anymore as it's deprecated as of Next 15.5 and removed in Next 16.

[icyJoseph]

More info here too: #85244 - LLM's are not fully up-to-date yet, but you might want to also try https://nextjs.org/docs/app/guides/mcp to answer here.