New ESLint "flat" configuration file does not work with `next/core-web-vitals`

[hb20007]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/pensive-star-go8s7s

To Reproduce

1. Run npm run dev and observe the error showing that ...compat.extends("next/core-web-vitals") does not work.

Current vs. Expected behavior

Current behavior: It is impossible to use the new ESLint "flat config" in a Next.js project (due to next/core-web-vitals).

Expected behavior: It should work.

Which area(s) are affected? (Select all that apply)

ESLint (eslint-config-next)

Additional context

In case it is not clear, I have imported ...compat.extends("next/core-web-vitals") in page.tsx only for the purpose of showing that it does not work. The file with the actual ESLint configuration is eslint.config.js.

I have followed the official ESLint Configuration Migration Guide, where it is mentioned that FlatCompat should be used for an npm package which is in eslintrc format. In this case, I believe that the problem is that next/core-web-vitals is not an npm package. I also tried ...compat.extends("eslint-config-next"), but that does not work either.

For extra context, ESLint is moving from .eslintrc.json to eslint.config.js, and all other shareable ESLint configs I am using (e.g., typescript-eslint, eslint-config-prettier) already support this, even without needing to use FlatCompat.

_NEXT-3293

[devjiwonchoi]

Hi, IMHO we need to wait until all the deps of esling-config-next support eslint 9 since it just have been released, will need some patches before we call it stable.

The deps:

"dependencies": {
  "@next/eslint-plugin-next": "14.2.0-canary.60",
  "@rushstack/eslint-patch": "^1.3.3",
  "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
  "eslint-import-resolver-node": "^0.3.6",
  "eslint-import-resolver-typescript": "^3.5.2",
  "eslint-plugin-import": "^2.28.1",
  "eslint-plugin-jsx-a11y": "^6.7.1",
  "eslint-plugin-react": "^7.33.2",
  "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
},

[immdraselkhan]

Until the fixed version of ESLint needs to downgrade to v8.57.0

Remove the ESLint v9
yarn remove eslint

Install the v8.57.0
yarn add -D eslint@8.57.0

[QuentinScDS]

Until the fixed version of ESLint needs to downgrade to v8.57.0

Remove the ESLint v9 yarn remove eslint

Install the v8.57.0 yarn add -D eslint@8.57.0

Thank you !

[hdaum]

Support for the "new" config format shouldn't be tied to version 9 support. 8.57.0 can also use the flat config format and my company would like to migrate our configurations to the new format in preparation for moving to eslint 9.

This is the only plugin that we use that doesn't work with the newer format.

[daanvosdewael]

ESLint published a new package to help with dependency plugins that are not yet converted to the Flat config: @eslint/compat. Details about how this works is in their blogpost: https://eslint.org/blog/2024/05/eslint-compatibility-utilities/

Could this help with the migration of the eslint-config-next package to ESLint v9?