Next.js v15 is being installed with ESLint v8

[silvenon]

Link to the code that reproduces this issue

https://github.com/silvenon/repro/tree/nextjs-v15-eslint-v8

To Reproduce

1. create an app using npx create-next-app@latest
2. ensure that ESLint is set to "Yes"

Current vs. Expected behavior

Currently it installs ESLint v8, but I expected v9 considering that Next.js v15 says that it supports v9. Did I misunderstand what that meant?

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:39:07 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.18.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.9.0
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: 15.0.1
  react: 19.0.0-rc-69d4b800-20241021
  react-dom: 19.0.0-rc-69d4b800-20241021
  typescript: 5.6.3
Next.js Config:
  output: N/A

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

create-next-app, Linting

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

next dev (local), next build (local)

Additional context

No response

[samcx]

@silvenon It is on our to-do list! We have not added it to create-next-app yet since I believe there are a few improvements to be done (e.g., I believe using flat config looks funky right now versus the old config).

Nonetheless, ESLint v9 is fully supported in v15.

[martinkadlec0]

Is there any example of how a flat config for v9 could look like (with vitals & next config with typescript) ? There are some hacky solutions out there from before the official support, but can't find anything new after the release.

[Jochem-W]

Is there any example of how a flat config for v9 could look like (with vitals & next config with typescript) ? There are some hacky solutions out there from before the official support, but can't find anything new after the release.

I ended up using the solution outlined here on the ESLint docs. Not sure if there's a better solution currently, but it works for me in VS Code and when running next commands.

// eslint.config.mjs
import { FlatCompat } from "@eslint/eslintrc"
import path from "path"
import { fileURLToPath } from "url"

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

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

/** @type {import('eslint').Linter.Config[]} */
const configs = [
  ...compat.extends("next/core-web-vitals"),
  ...compat.extends("next/typescript"),
]

export default configs

[Sparticuz]

This should work

import nextPlugin from "@next/eslint-plugin-next";

export default [
  {
    name: "Next Plugin",
    plugins: {
      "@next/next": nextPlugin,
      rules: {
        ...nextPlugin.configs.recommended.rules,
        ...nextPlugin.configs["core-web-vitals"].rules,
      },
    },
  },
];

[hongz1]

@Sparticuz - It does not work. I ran "npm run lint", error message is shown: "Cannot convert undefined or null to object".

However, @Jochem-W approach works well.

[hongz1]

Here are alternative solution I found in order to use eslint v9 with nextjs 15.0.3 (current create-next-app@latest)

1. npx create-next-app@latest
2. Choose 'No' to eslint install option
3. install eslint manually. npm i -D eslint eslint-config-next
4. create file eslint.config.mjs in root dir.
5. Write following codes.

import pluginNext from '@next/eslint-plugin-next';
import parser from '@typescript-eslint/parser';

export default [
  {
    name: 'ESLint Config - nextjs',
    languageOptions: {
      parser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    plugins: {
      '@next/next': pluginNext,
    },
    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
    rules: {
      ...pluginNext.configs.recommended.rules,
      ...pluginNext.configs['core-web-vitals'].rules,
    },
  },
];

$ npm run lint

[mcorbelli]

Do we know when ESLint 9 will be compatible with Next.js 15? Is there any roadmap?