next lint does not recognize eslint.config.js

[leetdavid]

Link to the code that reproduces this issue

https://github.com/leetdavid/nextjstest

To Reproduce

1. Run pnpm create next-app with ESLint Enabled
2. Rename .eslintrc.json to eslint.config.js
3. Run pnpm lint and it will create yet another .eslintrc.json after prompting.

Current vs. Expected behavior

I expect next lint to recognize the eslint.config.js file, but it does not.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024
  Available memory (MB): 31658
  Available CPU cores: 32
Binaries:
  Node: 21.7.1
  npm: 10.5.0
  Yarn: N/A
  pnpm: 8.15.6
Relevant Packages:
  next: 14.2.1 // Latest available version is detected (14.2.1).
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
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)

Additional context

I renamed the .eslintrc.json file to eslint.config.js and the above happens.

I am using turborepo.
Renaming my eslint file to .eslintrc.json file results in another error:

pnpm lint

╰─ pnpm lint     

> @monorepo-name/web@0.1.0 lint /<repo path>/apps/web
> next lint

Cannot read config file: /<repo path>/tools/eslint-config/base.js
Error: Unexpected token 'export'
Referenced from: /<repo path>/apps/web/.eslintrc.json

apps/web/.eslintrc.json (my next.js project path's .eslintrc.json, after renaming from eslint.config.js)

{
  "root": true,
  "extends": [
    "@monorepo-name/eslint-config/base",
    "@monorepo-name/eslint-config/nextjs",
    "@monorepo-name/eslint-config/react"
  ]
}

tools/eslint-config/base.js

/** @type {import("eslint").Linter.Config} */
const config = {
  extends: [
    "turbo",
    "prettier",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended-type-checked",
    "plugin:@typescript-eslint/stylistic-type-checked",
    "plugin:import/recommended",
    "plugin:import/typescript",
  ],
  ...
}
export default config;

tools/eslint-config/nextjs.js

/** @type {import('eslint').Linter.Config} */
const config = {
  extends: ["plugin:@next/next/core-web-vitals"],
  rules: {
    "@next/next/no-html-link-for-pages": "off",
  },
};

export default config;

_NEXT-3316

[edvardsanta]

Next.js currently uses an ESLint version that predates v9.0.0, which does not recognize the eslint.config.js configuration file. This file format was introduced in ESLint v9.0.0. To support eslint.config.js, an update to ESLint v9.0.0 or newer is required. I think this change is a feature update rather than a bug fix, as it involves adopting a new major version of ESLint that includes enhancements and new configuration capabilities.

[leetdavid]

Ok, that explains a lot. Thanks for the insight!

[ginnymin]

Next.js currently uses an ESLint version that predates v9.0.0, which does not recognize the eslint.config.js configuration file. This file format was introduced in ESLint v9.0.0. To support eslint.config.js, an update to ESLint v9.0.0 or newer is required. I think this change is a feature update rather than a bug fix, as it involves adopting a new major version of ESLint that includes enhancements and new configuration capabilities.

Actually ESLint v8 introduced the flat config format; v9 made it the default config format (that you have to opt out of if you want to continue the legacy format). So the flat config should still work with ESLint V8.