Support ESLint v8

[ykzts]

Add support for ESLint v8. This pull request is a draft because some libraries do not yet support ESLint v8.

• [eslint-patch] Add support for ESLint 8.x microsoft/rushstack#2965
• feat: support ESLint v8 typescript-eslint/typescript-eslint#3737
• [New] Support for ESLint v8 import-js/eslint-plugin-import#2191
• [New] support ESLint 8.x jsx-eslint/eslint-plugin-jsx-a11y#810
• [New] support eslint 8.x jsx-eslint/eslint-plugin-react#3059
• feat(eslint-plugin-react-hooks): support ESLint 8.x facebook/react#22248

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have helpful link attached, see contributing.md

fixes #29770
fixes #29802
fixes #29829

[ijjk]

Failing test suites

Commit: e604aab

test/development/basic-basepath/hmr.test.ts

• basic HMR > Error Recovery > should recover after a bad return from the render function
• basic HMR > Error Recovery > should recover after undefined exported as default

Expand output

● basic HMR › Error Recovery › should recover after a bad return from the render function

TIMED OUT: /This is the about page/

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:561:9)

● basic HMR › Error Recovery › should recover after undefined exported as default

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `basic HMR Error Recovery should recover after undefined exported as default 1`

- Snapshot  - 3
+ Received  + 1

   1 of 1 unhandled error
- Server Error
+ Unhandled Runtime Error

  Error: The default export is not a React Component in page: "/hmr/about7"
-
- This error happened while generating the page. Any console logs will be displayed in the terminal window.

  603 |         await next.patchFile(aboutPage, aboutContent)
  604 |
> 605 |         if (browser) {
      |                       ^
  606 |           await check(
  607 |             () => getBrowserBodyText(browser),
  608 |             /This is the about page/

  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:605:23)

[housseindjirdeh]

I submitted a PR that shows a more useful warning in the meantime if ESLint v8 is installed: #30113. Please remove this temporary warning and the conditional check for v8 in this PR when support fully lands!

[housseindjirdeh]

Amazing, thanks again for this ❤️

[timneutkens]

@ykzts amazing work! @housseindjirdeh has approved the changes so this should be good to land, only thing I noticed is that there's a merge conflict, once that is fixed we can merge the PR 👍

[ykzts]

@timneutkens Thank you! I have resolved the conflict!

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	ykzts/next.js eslint8	Change
buildDuration	18s	17.8s	-183ms
buildDurationCached	3.5s	3.6s	⚠️ +117ms
nodeModulesSize	335 MB	335 MB	-1.16 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	ykzts/next.js eslint8	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.985	2.902	-0.08
/ avg req/sec	837.38	861.33	+23.95
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.378	1.365	-0.01
/error-in-render avg req/sec	1814.41	1830.9	+16.49

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ykzts/next.js eslint8	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28.3 kB	28.3 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.2 kB	72.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ykzts/next.js eslint8	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ykzts/next.js eslint8	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.3 kB	13.3 kB	✓

Client Build Manifests

	vercel/next.js canary	ykzts/next.js eslint8	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	ykzts/next.js eslint8	Change
index.html gzip	523 B	523 B	✓
link.html gzip	536 B	536 B	✓
withRouter.html gzip	517 B	517 B	✓
Overall change	1.58 kB	1.58 kB	✓

---

Default Build with SWC (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	ykzts/next.js eslint8	Change
buildDuration	19.1s	19.4s	⚠️ +269ms
buildDurationCached	3.5s	3.6s	⚠️ +57ms
nodeModulesSize	335 MB	335 MB	-1.16 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ykzts/next.js eslint8	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.999	2.956	-0.04
/ avg req/sec	833.6	845.68	+12.08
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.388	1.4	⚠️ +0.01
/error-in-render avg req/sec	1800.52	1786.05	⚠️ -14.47

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ykzts/next.js eslint8	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.5 kB	28.5 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.5 kB	72.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ykzts/next.js eslint8	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ykzts/next.js eslint8	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.2 kB	13.2 kB	✓

Client Build Manifests

	vercel/next.js canary	ykzts/next.js eslint8	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	ykzts/next.js eslint8	Change
index.html gzip	524 B	524 B	✓
link.html gzip	535 B	535 B	✓
withRouter.html gzip	517 B	517 B	✓
Overall change	1.58 kB	1.58 kB	✓

Commit: b86320e

[timneutkens]

Landed! Thanks all!

[kachkaev]

FYI to those who’ve been watching this issue: ESLint 8 is not a part 12.0.4 (it was released a few hours earlier).

🤞 12.0.5-canary.0 and beyond 🚀

Great work @ykzts 👏👏👏

[krzysiek1507]

Hey! Any chance to backport it to 11.x series for easier transition for people who already use ESlint 8 with Next 10? 😅

[kachkaev]

@krzysiek1507 what blocks you from using Next 12?

I haven’t seen Next.js team backporting features to old major versions. I don’t think it’d be an easy thing to pitch, even if you provide a perfect PR that can be merged without any changes. 🤔

[krzysiek1507]

@krzysiek1507 what blocks you from using Next 12?

Webpack 5 and a few more things that I need to migrate to align with Next 11.2.