next-lint Doesn't Support ESLint 9

[dylandignan]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/vigilant-pine-6wmz8y

To Reproduce

1. Add next lint script to package.json per https://nextjs.org/docs/app/building-your-application/configuring/eslint
2. Add .eslintrc.json to project per https://nextjs.org/docs/app/building-your-application/configuring/eslint

{
  "extends": "next/core-web-vitals"
}

3. Run lint and get an error

➜  /workspace git:(master) ✗ npm run lint

> lint
> next lint

Invalid Options:
- Unknown options: useEslintrc, extensions, resolvePluginsRelativeTo, rulePaths, ignorePath, reportUnusedDisableDirectives
- 'extensions' has been removed.
- 'resolvePluginsRelativeTo' has been removed.
- 'ignorePath' has been removed.
- 'rulePaths' has been removed. Please define your rules using plugins.
- 'reportUnusedDisableDirectives' has been removed. Please use the 'overrideConfig.linterOptions.reportUnusedDisableDirectives' option instead.

Current vs. Expected behavior

Expected lint to run successfully, but it failed with errors.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.2.1-canary.0 // Latest available version is detected (14.2.1-canary.0).
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

ESLint (eslint-config-next)

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

next dev (local), next build (local), next start (local)

Additional context

It looks like this is coming from https://github.com/vercel/next.js/blob/canary/packages/next/src/cli/next-lint.ts. This needs to be changed to support ESLint 9's flat config https://eslint.org/docs/latest/use/migrate-to-9.0.0#flat-config. The migration guide is at https://eslint.org/docs/latest/use/configure/migration-guide

_NEXT-3112

[davidjulakidze]

Bumping this for visibility, it does not seem to prevent build but unsure of the impact.

✓ Compiled successfully
   Linting and checking validity of types  .. 
⨯ ESLint: Invalid Options: - Unknown options: useEslintrc, extensions - 'extensions' has been removed.
✓ Linting and checking validity of type

"next": "^14.2.0",
"eslint-config-next": "^14.2.0",
"eslint": "^9.0.0",

{
  "extends": "next/core-web-vitals"
}

[elmarsto]

Bumping this, it is breaking package update automation at my corp

[GabenGar]

Yeah it's breaking change because ESLint 9.0.0 is a major release with a ton of breaking changes. You better hope NextJS didn't adhoc around every single ESLint implementation detail, so the migration to the newest version wouldn't take forever on their end.
For now a "fix" is to update next and eslint-config-next to 14.2.1 which limits the range of required ESLint version to eslint@"^7.23.0 || ^8.0.0" and therefore will crash on install/update instead.

[SukkaW]

IMHO, the adoption should be done gradually in the following steps:

• Migrate eslint-config-next, so it exposes both the legacy eslintrc config and the new flat config.
• Change Next.js internal ESLint implementation, allows it to accept both the legacy config .eslintrc and the new flat config eslint.config.js.
• Change next lint so that it can accept eslint.config.js
• Change create-next-app built-in template to use eslint.config.js
• Change Next.js example to use eslint.config.js

[BnAmN]

IMHO, the adoption should be done gradually in the following steps:

• Migrate eslint-config-next, so it exposes both the legacy eslintrc config and the new flat config.

• Change Next.js internal ESLint implementation, allows it to accept both the legacy config .eslintrc and the new flat config eslint.config.js.

• Change next lint so that it can accept eslint.config.js

• Change create-next-app built-in template to use eslint.config.js

• Change Next.js example to use eslint.config.js

I would like to add that the new flat config file can have multiple names:

• eslint.config.js
• eslint.config.mjs
• eslint.config.cjs

Source: https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file

[nxtvoid]

Same error

package.json

"dependencies": {
    "next": "14.2.2"
},
"devDependencies": {
    "eslint": "^9.1.0",
    "eslint-config-next": "14.2.2"
}

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "./node_modules/standard/eslintrc.json"],
  "rules": {
    "space-before-function-paren": "off"
  }
}

deploy

[Willem-Jaap]

Not a fix but you can ignore eslint during build like so:

// next.config.js
module.exports = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
}

This way you have manual control over eslint, you can run a custom linting config before build.