Upgrade eslint to the latest version (#24377)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes

.eslintrc.json

@@ -27,7 +27,10 @@
       "extends": ["plugin:jest/recommended"],
       "rules": {
         "jest/expect-expect": "off",
-        "jest/no-disabled-tests": "off"
+        "jest/no-disabled-tests": "off",
+        "jest/no-conditional-expect": "off",
+        "jest/valid-title": "off",
+        "jest/no-interpolation-in-snapshots": "off"
       }
     },
     { "files": ["**/__tests__/**"], "env": { "jest": true } },

package.json

@@ -49,8 +49,8 @@
     "@types/http-proxy": "1.17.3",
     "@types/jest": "24.0.13",
     "@types/string-hash": "1.1.1",
-    "@typescript-eslint/eslint-plugin": "2.17.0",
-    "@typescript-eslint/parser": "2.17.0",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
     "@zeit/next-css": "1.0.2-canary.2",
     "@zeit/next-sass": "1.0.2-canary.2",
     "@zeit/next-typescript": "1.1.2-canary.0",
@@ -71,11 +71,11 @@
     "cross-env": "6.0.3",
     "cross-spawn": "6.0.5",
     "escape-string-regexp": "2.0.0",
-    "eslint": "6.8.0",
-    "eslint-plugin-import": "2.20.2",
-    "eslint-plugin-jest": "23.13.1",
-    "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "2.3.0",
+    "eslint": "7.24.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "4.2.0",
     "execa": "2.0.3",
     "express": "4.17.0",
     "faunadb": "2.6.1",
@@ -87,7 +87,6 @@
     "image-size": "0.9.3",
     "is-animated": "2.0.0",
     "isomorphic-unfetch": "3.0.0",
-    "jest-cli": "27.0.0-next.5",
     "ky": "0.19.1",
     "ky-universal": "0.6.0",
     "lerna": "4.0.0",
@@ -129,7 +128,8 @@
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
     "webpack-bundle-analyzer": "4.3.0",
-    "worker-loader": "3.0.7"
+    "worker-loader": "3.0.7",
+    "jest": "27.0.0-next.8"
   },
   "resolutions": {
     "browserslist": "4.16.1",

packages/next/build/output/index.ts

@@ -12,11 +12,6 @@ export function startedDevelopmentServer(appUrl: string, bindAddr: string) {
 let previousClient: import('webpack').Compiler | null = null
 let previousServer: import('webpack').Compiler | null = null
 
-type CompilerDiagnosticsWithFile = {
-  errors: { file: string | undefined; message: string }[] | null
-  warnings: { file: string | undefined; message: string }[] | null
-}
-
 type CompilerDiagnostics = {
   errors: string[] | null
   warnings: string[] | null
@@ -44,6 +39,8 @@ type BuildStatusStore = {
   amp: AmpPageStatus
 }
 
+// eslint typescript has a bug with TS enums
+/* eslint-disable no-shadow */
 enum WebpackStatusPhase {
   COMPILING = 1,
   COMPILED_WITH_ERRORS = 2,

packages/next/build/webpack-config.ts

@@ -596,7 +596,10 @@ export default async function getBaseWebpackConfig(
   async function handleExternals(
     context: string,
     request: string,
-    getResolve: () => (context: string, request: string) => Promise<string>
+    getResolve: () => (
+      resolveContext: string,
+      resolveRequest: string
+    ) => Promise<string>
   ) {
     if (request === 'next') {
       return `commonjs ${request}`
@@ -763,8 +766,8 @@ export default async function getBaseWebpackConfig(
                 context: string
                 request: string
                 getResolve: () => (
-                  context: string,
-                  request: string
+                  resolveContext: string,
+                  resolveRequest: string
                 ) => Promise<string>
               }) => handleExternals(context, request, getResolve)
             : (

packages/next/build/webpack/plugins/webpack-conformance-plugin/TestInterface.ts

@@ -6,6 +6,8 @@ export interface IConformanceAnomaly {
   stack_trace?: string
 }
 
+// eslint typescript has a bug with TS enums
+/* eslint-disable no-shadow */
 export enum IConformanceTestStatus {
   SUCCESS,
   FAILED,

packages/next/build/webpack/plugins/webpack-conformance-plugin/checks/granular-chunks-conformance.ts

@@ -1,3 +1,4 @@
+/* @eslint-disable no-redeclare */
 import chalk from 'chalk'
 import {
   CONFORMANCE_ERROR_PREFIX,
@@ -10,11 +11,6 @@ import {
 } from '../TestInterface'
 import { deepEqual } from '../utils/utils'
 
-export interface GranularChunksConformanceCheck
-  extends IWebpackConformanceTest {
-  granularChunksConfig: any
-}
-
 function getWarningMessage(modifiedProp: string) {
   return (
     `${CONFORMANCE_WARNING_PREFIX}: The splitChunks config has been carefully ` +
@@ -33,7 +29,9 @@ function getErrorMessage(message: string) {
   )
 }
 
-export class GranularChunksConformanceCheck {
+/* @eslint-disable-next-line no-redeclare */
+export class GranularChunksConformanceCheck implements IWebpackConformanceTest {
+  granularChunksConfig: any
   constructor(granularChunksConfig: any) {
     this.granularChunksConfig = granularChunksConfig
   }

packages/next/lib/recursive-copy.ts

@@ -14,7 +14,7 @@ export async function recursiveCopy(
   }: {
     concurrency?: number
     overwrite?: boolean
-    filter?(path: string): boolean
+    filter?(filePath: string): boolean
   } = {}
 ): Promise<void> {
   const cwdPath = process.cwd()

packages/next/lib/typescript/diagnosticFormatter.ts

@@ -2,6 +2,8 @@ import { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'
 import chalk from 'chalk'
 import path from 'path'
 
+// eslint typescript has a bug with TS enums
+/* eslint-disable no-shadow */
 export enum DiagnosticCategory {
   Warning = 0,
   Error = 1,

packages/next/next-server/lib/post-process.ts

@@ -14,7 +14,7 @@ type renderOptions = {
   getFontDefinition?: (url: string) => string
 }
 
-type postProcessData = {
+type PostProcessData = {
   preloads: {
     images: Array<string>
   }
@@ -23,12 +23,12 @@ type postProcessData = {
 interface PostProcessMiddleware {
   inspect: (
     originalDom: HTMLElement,
-    data: postProcessData,
+    data: PostProcessData,
     options: renderOptions
   ) => void
   mutate: (
     markup: string,
-    data: postProcessData,
+    data: PostProcessData,
     options: renderOptions
   ) => Promise<string>
 }
@@ -58,7 +58,7 @@ async function processHTML(
   if (!middlewareRegistry[0]) {
     return html
   }
-  const postProcessData: postProcessData = {
+  const postProcessData: PostProcessData = {
     preloads: {
       images: [],
     },
@@ -92,7 +92,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
   fontDefinitions: (string | undefined)[][] = []
   inspect(
     originalDom: HTMLElement,
-    _data: postProcessData,
+    _data: PostProcessData,
     options: renderOptions
   ) {
     if (!options.getFontDefinition) {
@@ -121,7 +121,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
   }
   mutate = async (
     markup: string,
-    _data: postProcessData,
+    _data: PostProcessData,
     options: renderOptions
   ) => {
     let result = markup
@@ -157,7 +157,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
 }
 
 class ImageOptimizerMiddleware implements PostProcessMiddleware {
-  inspect(originalDom: HTMLElement, _data: postProcessData) {
+  inspect(originalDom: HTMLElement, _data: PostProcessData) {
     const imgElements = originalDom.querySelectorAll('img')
     let eligibleImages: Array<HTMLElement> = []
     for (let i = 0; i < imgElements.length; i++) {
@@ -178,7 +178,7 @@ class ImageOptimizerMiddleware implements PostProcessMiddleware {
       }
     }
   }
-  mutate = async (markup: string, _data: postProcessData) => {
+  mutate = async (markup: string, _data: PostProcessData) => {
     let result = markup
     let imagePreloadTags = _data.preloads.images
       .filter((imgHref) => !preloadTagAlreadyExists(markup, imgHref))

packages/next/next-server/lib/router/router.ts

@@ -1,4 +1,3 @@
-/* global __NEXT_DATA__ */
 // tslint:disable:no-console
 import { ParsedUrlQuery } from 'querystring'
 import { ComponentType } from 'react'
@@ -554,7 +553,7 @@ export default class Router implements BaseRouter {
       pageLoader: any
       Component: ComponentType
       App: AppComponent
-      wrapApp: (App: AppComponent) => any
+      wrapApp: (WrapAppComponent: AppComponent) => any
       err?: Error
       isFallback: boolean
       locale?: string

packages/next/pages/_document.tsx

@@ -72,9 +72,9 @@ export default class Document<P = {}> extends Component<DocumentProps & P> {
     return { html, head, styles }
   }
 
-  static renderDocument<P>(
-    DocumentComponent: new () => Document<P>,
-    props: DocumentProps & P
+  static renderDocument<Y>(
+    DocumentComponent: new () => Document<Y>,
+    props: DocumentProps & Y
   ): React.ReactElement {
     return (
       <DocumentComponentContext.Provider value={props}>

packages/next/telemetry/trace/shared.ts

@@ -1,3 +1,5 @@
+// eslint typescript has a bug with TS enums
+/* eslint-disable no-shadow */
 export enum TARGET {
   CONSOLE = 'CONSOLE',
   ZIPKIN = 'ZIPKIN',

packages/next/telemetry/trace/trace.ts

@@ -6,6 +6,8 @@ const NUM_OF_MICROSEC_IN_SEC = BigInt('1000')
 
 const getId = () => randomBytes(8).toString('hex')
 
+// eslint typescript has a bug with TS enums
+/* eslint-disable no-shadow */
 export enum SpanStatus {
   Started,
   Stopped,

packages/next/types/webpack.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies, @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies, @typescript-eslint/no-unused-vars , no-shadow */
 // Type definitions for webpack 4.39
 // Project: https://github.com/webpack/webpack
 // Definitions by: Qubo <https://github.com/tkqubo>