[ESLint] Adds temporary error message for ESLint v8

packages/next/lib/eslint/runLintCheck.ts

@@ -26,7 +26,7 @@ type Config = {
 }
 
 const requiredPackages = [
-  { file: 'eslint/lib/api.js', pkg: 'eslint' },
+  { file: 'eslint', pkg: 'eslint' },
   { file: 'eslint-config-next', pkg: 'eslint-config-next' },
 ]
 
@@ -94,8 +94,8 @@ async function lint(
           lintDuringBuild ? ' in order to run during builds:' : ':'
         } ${chalk.bold.cyan(
           (await isYarn(baseDir))
-            ? 'yarn add --dev eslint'
-            : 'npm install --save-dev eslint'
+            ? 'yarn add --dev eslint@"<8.0.0"' // TODO: Remove @"<8.0.0" when ESLint v8 is supported https://github.com/vercel/next.js/pull/29865
+            : 'npm install --save-dev eslint@"<8.0.0"' // TODO: Remove @"<8.0.0" when ESLint v8 is supported https://github.com/vercel/next.js/pull/29865
         )}`
       )
       return null
@@ -111,7 +111,16 @@ async function lint(
         'error'
       )} - Your project has an older version of ESLint installed${
         eslintVersion ? ' (' + eslintVersion + ')' : ''
-      }. Please upgrade to ESLint version 7 or later`
+      }. Please upgrade to ESLint version 7`
+    } else if (semver.gte(eslintVersion, '8.0.0')) {
+      // TODO: Remove this check when ESLint v8 is supported https://github.com/vercel/next.js/pull/29865
+      return `${chalk.red('error')} - ESLint version ${
+        eslintVersion ? eslintVersion : '8'
+      } is not yet supported. Please downgrade to version 7 for the meantime: ${chalk.bold.cyan(
+        (await isYarn(baseDir))
+          ? 'yarn remove eslint && yarn add --dev eslint@"<8.0.0"'
+          : 'npm uninstall eslint && npm install --save-dev eslint@"<8.0.0"'
+      )}`
     }
 
     let options: any = {

test/integration/eslint/invalid-newer-eslint-version/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": "next",
+  "root": true
+}

test/integration/eslint/invalid-newer-eslint-version/pages/index.js

@@ -0,0 +1,8 @@
+const Home = () => (
+  <div>
+    <p>Home</p>
+    /* Badly formatted comment */
+  </div>
+)
+
+export default Home

test/integration/eslint/test/index.test.js

@@ -21,7 +21,14 @@ const dirPluginCoreWebVitalsConfig = join(
 const dirIgnoreDuringBuilds = join(__dirname, '../ignore-during-builds')
 const dirCustomDirectories = join(__dirname, '../custom-directories')
 const dirConfigInPackageJson = join(__dirname, '../config-in-package-json')
-const dirInvalidEslintVersion = join(__dirname, '../invalid-eslint-version')
+const dirInvalidOlderEslintVersion = join(
+  __dirname,
+  '../invalid-eslint-version'
+)
+const dirInvalidNewerEslintVersion = join(
+  __dirname,
+  '../invalid-newer-eslint-version'
+)
 const dirMaxWarnings = join(__dirname, '../max-warnings')
 const dirEmptyDirectory = join(__dirname, '../empty-directory')
 const dirEslintIgnore = join(__dirname, '../eslint-ignore')
@@ -92,18 +99,40 @@ describe('ESLint', () => {
       )
     })
 
-    test('invalid eslint version', async () => {
-      const { stdout, stderr } = await nextBuild(dirInvalidEslintVersion, [], {
-        stdout: true,
-        stderr: true,
-      })
+    test('invalid older eslint version', async () => {
+      const { stdout, stderr } = await nextBuild(
+        dirInvalidOlderEslintVersion,
+        [],
+        {
+          stdout: true,
+          stderr: true,
+        }
+      )
 
       const output = stdout + stderr
       expect(output).toContain(
         'Your project has an older version of ESLint installed'
       )
     })
 
+    // TODO: Remove this test when ESLint v8 is supported https://github.com/vercel/next.js/pull/29865
+    test('invalid newer eslint version', async () => {
+      const { stdout, stderr } = await nextBuild(
+        dirInvalidNewerEslintVersion,
+        [],
+        {
+          stdout: true,
+          stderr: true,
+        }
+      )
+
+      const output = stdout + stderr
+      console.log(output)
+      expect(output).toContain(
+        'ESLint version 8.0.1 is not yet supported. Please downgrade to version 7 for the meantime'
+      )
+    })
+
     test('empty directories do not fail the build', async () => {
       const { stdout, stderr } = await nextBuild(dirEmptyDirectory, [], {
         stdout: true,