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

[JJozef]

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.

[JJozef]

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.

I went back to version "eslint": "^8.41.0" and the error stopped.

[mirasayon]

Same error

.eslintrc.json :
{ "extends": "next/core-web-vitals" }

I updated all the packages to the latest version but this still does not solve the problem

I don’t want to go back to the old version to fix it. If anyone knows how to solve the problem without going to the old version, please help me 🙏

[GabenGar]

The only package update of relevance is eslint-config-next, which is tied to the version of next, aka wait for one of the newest nextjs versions. Until then you have to stick to old one.

[dalindev]

Same issue here, I thought I was crazy. Downgrade to an old version for now... 🤖 😸

devDependencies:
- eslint 9.1.1
+ eslint 8.57.0 (9.1.1 is available)

[sebalaini]

having the same problem here, I have a custom-shared lint config and my latest PR when linked locally to test it it fails, sebalaini/sebalaini-lints-config#6

[TomasHubelbauer]

ESLint v8 is now official EOL as of today:
https://eslint.org/blog/2024/09/eslint-v8-eol-version-support/#eslint-v8.x-end-of-life-is-october-5%2C-2024

I skimmed through this thread and it seems like the only workaround identified was to downgrade to v8, so with this change, Next is now shipping with unsupported packages.

Hopefully Vercel can dedicate some folks on this. To me, it seems like a pretty bad look to have a Next package script just not work OOTB. Vercel is an actual company, not a scrappy startup or a loose group of volunteers, so IMO they should find it easier to get some hands on this.

[Lordfirespeed]

If they do end up mucking about with eslint 9 support, perhaps they could simultaneously separate doctoring logic from next lint so we can use alternative linters, such as Biome ...

[seamuslowry]

Just pointing out that the PRs listed in #64409 (comment) are merged. As best I can tell, ESLint 9 support is no longer blocked by downstream dependencies.

[IvanCaceres]

Also would like to check in on ESLint 9 support now that it's no longer blocked by downstream dependencies.

[jamiter]

@TomasHubelbauer, downgrading to v8 isn't the only workaround. See #64409 (comment)

Do agree with the sentiment that this needs some more attention.

[DamienCassou]

I've been using eslint v9 and next rules for a while now with #64409 (comment).

[philsherry]

@jamiter From the moment the ESLint team started the tracking threads below, someone from Vercel should've had a team looking into which dependencies are in use, what they might be able to do help get them upgraded on time (or even earlier), and an idea of how bad things might look if they ended up still shipping with v8 after it was EOL.

But here we are.

• 📈 Tracking: Flat Config support
• 📈 Tracking: ESLint v9 support

[kachkaev]

I was able to upgrade to ESLint v9 after adding this workaround to .eslintrc.cjs:

    '@next/next/no-duplicate-head': 'off', // https://github.com/vercel/next.js/issues/64409#issuecomment-2343832704
    '@next/next/no-page-custom-font': 'off', // https://github.com/vercel/next.js/issues/64409

I also bumped eslint-plugin-react-hooks in package.json (which eslint-config-next depends on):

  "pnpm": {
    "overrides": {
      "eslint-plugin-react-hooks": "npm:eslint-plugin-react-hooks@5.1.0-rc-1460d67c-20241003"
    }
  }

If you are using Yarn/NPM, the syntax may be a bit different but the idea would be the same. The latest version of eslint-plugin-react-hooks does not support ESLint v9, but their rc/ next / canary tags do. Next depends on this package.

---

I haven’t upgraded to FlagConfig yet, this is not a blocker. To use old config with ESLint v9, you can add ESLINT_USE_FLAT_CONFIG=false to your package.json scripts. I don’t run next lint and run eslint command instead (your flags may vary):

    "fix:eslint": "ESLINT_USE_FLAT_CONFIG=false eslint --max-warnings=0 --fix \"**/*\"",
    "...": "...",
    "lint:eslint": "ESLINT_USE_FLAT_CONFIG=false eslint --max-warnings=0 \"**/*\"",

If you use VS Code (Cursor etc.), you need to also add "eslint.useFlatConfig": false to the repo’s .vscode/settings.json. This will re-enable IDE integration.

[uhrohraggy]

For anyone hitting here, I also wanted to have tslint support, so the flat-packed eslint.config.mjs I'm using that combines a few of these suggestions:

Packages

pnpm add --save-dev eslint @eslint/js @types/eslint__js typescript typescript-eslint

eslint.config.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";
import eslint from "@eslint/js";
import tseslint from 'typescript-eslint';

import { FlatCompat } from "@eslint/eslintrc";
import { fixupConfigRules } from "@eslint/compat";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const recommendedConfig = {
    ...eslint.configs.recommended,
    ...tseslint.configs.recommended,
}
  
const allConfig = {
    ...eslint.configs.all,
    ...tseslint.configs.all,
}

const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: recommendedConfig,
    allConfig: allConfig
});

const fullConfig = tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    ...compat.extends("next/core-web-vitals"),
    {
      rules: {
        "@next/next/no-img-element": "off",
      },
    },
    {
        ignores: [".next/**/*"],
    }
  );

export default fixupConfigRules(fullConfig);

[lveillard]

deprecated eslint@8.57.1: This version is no longer supported.

eslint 8 is officially deprecated already :S

[uzbeki]

What is the timeline for Eslint 9 support feature? When is NextJS planning to ship it? Do you guys need help?

[Nickk4]

My guess is that Vercel is working hard to release Next 15, as the Next.js conference is just around the corner. Perhaps they'll then advice to update to Next 15, which I assume will support eslint 9.

[philsherry]

@Nickk4 My guess is that Vercel is working hard to release Next 15, as the Next.js conference is just around the corner. Perhaps they'll then advice to update to Next 15, which I assume will support eslint 9.

@samcx mentions Next 15 in this thread ☝️ but to say that it'll be shipping without ESLint 9. Whether that'll be quick enough to turn around now that all of the plugins that were holding things up are good to go, who knows.

[psychobolt]

Adding more context, also need changing is the eslint options from

next.js/packages/next/src/lib/eslint/runLintCheck.ts

Line 149 in e8af5c9

let options: any = {

and I believe flatConfig would also need to be supported here instead of eslintrc

[tiavina-mika]

It looks like Vercel has underestimated ESLint. I think a dedicated team is needed for the migration as soon as possible. ESLint 8 has been deprecated for a week now, and all projects will start migrating to ESLint v9.