fix: resolve "circular structure" error in ESLint & complete Flat Config setup #550
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes the
TypeError: Converting circular structure to JSONerror affecting local linting and CI, and completes the migration to ESLint 9's Flat Config format with full TypeScript support.Problem Analysis
The current
eslint.config.mjsusesFlatCompatto extendnext/core-web-vitals.In the current version of
eslint-config-next+ ESLint 9,FlatCompatcreates a circular reference within the internal plugin configuration (specifically related toreact-hooks), causing the config validator to crash with a JSON serialization error.Additionally, the previous configuration relied on the default parser, which could cause parsing errors in TypeScript files (
.ts,.tsx).Solution
I have refactored
eslint.config.mjsto use a native Flat Config approach (Plugin Composition) instead ofFlatCompat.FlatCompat: Avoids the circular dependency issue entirely by manually composing plugins.typescript-eslint: Integratedtseslint.config()to ensure proper parsing and type-checking for TypeScript files."lint": "next lint"to"lint": "eslint ."inpackage.json(aligned with Next.js 16 breaking changes).@next/eslint-plugin-next,eslint-plugin-react, etc., todevDependenciesto support the new config structure.Verification
npm run lintlocally -> Passed (No circular errors, correct linting)..nextandnode_modulesare correctly ignored.This change should resolve the linting issues in the CI pipeline as well.