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

[sawa-ko]

I was trying your solution and it doesn't seem to work, since I run the command pnpm eslint --debug and it seems to load the plugin, but it doesn't load anything from the plugin, since nothing appears about Loading {extends: ‘plugin:react/recommended’} or Loading plugin ‘react’ from ... that should appear, so then the solution is not working I guess.

No react plugins, etc loaded

[sawa-ko]

@saltycrane

[sawa-ko]

With just ...fixupConfigRules(compat.extends('next', 'plugin:@next/next/core-web-vitals')) it seems to work, but nevertheless there are still some console errors.

[adrenaline681]

Is there any update on a simple eslint.config.js configuration that works with NextJS and the ESLint v9?
Using this doesn't work anymore with the new version of ESLint
"extends": "next/core-web-vitals"

[samcx]

Hi everyone,

Unfortunately, we were not able to ship this with Next.js 15. The current understanding of this is that we cannot do a clean ship of this until certain plugins add support for ESLint v9. For example:

• next.js/packages/eslint-config-next/index.js

  Lines 33 to 35 in 3dc2e67

  	['eslint-plugin-import', 'eslint-plugin-import'],
  	['eslint-plugin-react', 'eslint-plugin-react'],
  	['eslint-plugin-jsx-a11y', 'eslint-plugin-jsx-a11y'],

• https://github.com/import-js/eslint-plugin-import, Support eslint v9 import-js/eslint-plugin-import#2948
• https://github.com/jsx-eslint/eslint-plugin-react, ESLint v9 contains breaking API changes jsx-eslint/eslint-plugin-react#3699
• https://github.com/jsx-eslint/eslint-plugin-jsx-a11y, Add support for ESLint 9 jsx-eslint/eslint-plugin-jsx-a11y#978

We will share updates as they come!

[karlhorky]

@samcx the Next.js team may also want to consider switching from eslint-plugin-import to eslint-plugin-import-x, due to incompatibilities and other multiple issues and missing features

I mentioned something similar in my comment on the eslint-plugin-import issue (unfortunately marked as spam) - that it's possible to switch to eslint-plugin-import-x:

---

In case anyone wants to upgrade to ESLint v9 now, an alternative is to switch to the eslint-plugin-import-x fork:

1. Install eslint-plugin-import-x
2. Install @typescript-eslint/parser for TypeScript support

-import eslintImport from 'eslint-plugin-import';
+import eslintImportX from 'eslint-plugin-import-x';

/** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigArray} */
const configArray = [
  {
    plugins: {
-     import: eslintImport,
+     'import-x': eslintImportX,
    },
    settings: {
      'import-x/parsers': {
        '@typescript-eslint/parser': ['.ts', '.tsx'],
      },
      'import-x/resolver': {
        // Load <rootdir>/tsconfig.json
        typescript: true,
        node: true,
      },
    },
    rules: {
      // Error on imports that don't match the underlying file system
-     // https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
-     'import/no-unresolved': 'error',
+     // https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/no-unresolved.md
+     'import-x/no-unresolved': 'error',
  },
];

[karlhorky]

we cannot do a clean ship of this until certain plugins add support for ESLint v9

@samcx just as a note (probably you've already seen the tweet thread), there are ways of shipping a config with those unsupporting plugins like eslint-plugin-react:

• tweet thread: https://x.com/karlhorky/status/1792500811307622631
• our PR implementing support for ESLint v9 in our shared config (which also depends on eslint-plugin-react): Update dependency eslint to v9 upleveled/eslint-config-upleveled#369