[ESLint Plugin] Adds `no-duplicate-head` rule #27179

housseindjirdeh · 2021-07-14T22:11:00Z

Introduces a new rule to eslint-plugin-next that flag multiple instances of <Head> components used in a single custom document.

Fixes #27134

Note: The rule is set to error in the recommended configuration, which means that it will fail next build when ESLint is enabled during the build process and eslint-config-next is used.

ijjk · 2021-07-14T22:14:58Z

Failing test suites

Commit: 5ee4291

test/eslint-plugin-next/no-duplicate-head.test.js

no-duplicate-head > invalid >
import Document, { Html, Main, NextScript } from 'next/document'
import Head from 'next/head'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <Head />
        <Head />
      </Html>
    )
  }
}

export default MyDocument

Expand output

● no-duplicate-head › invalid ›
import Document, { Html, Main, NextScript } from 'next/document'
import Head from 'next/head'

  class MyDocument extends Document {
    render() {
      return (
        <Html>
          <Head />
          <Head />
          <Head />
        </Html>
      )
    }
  }
  
  export default MyDocument
  

assert.strictEqual(received, expected)

Expected value to strictly be equal to:
  1
Received:
  2

Message:
  Should have 1 error but had 2: [
  {
    ruleId: 'no-duplicate-head',
    severity: 1,
    message: 'Do not include multiple instances of <Head/>. See: https://nextjs.org/docs/messages/no-duplicate-head',
    line: 10,
    column: 15,
    nodeType: 'JSXElement',
    endLine: 10,
    endColumn: 23
  },
  {
    ruleId: 'no-duplicate-head',
    severity: 1,
    message: 'Do not include multiple instances of <Head/>. See: https://nextjs.org/docs/messages/no-duplicate-head',
    line: 11,
    column: 15,
    nodeType: 'JSXElement',
    endLine: 11,
    endColumn: 23
  }
]

  at testInvalidTemplate (../node_modules/eslint/lib/rule-tester/rule-tester.js:666:24)
  at Object.<anonymous> (../node_modules/eslint/lib/rule-tester/rule-tester.js:893:25)

ijjk · 2021-07-15T18:03:28Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
buildDuration	14.9s	14.6s	-348ms
buildDurationCached	3.5s	3.4s	-55ms
nodeModulesSize	49.4 MB	49.4 MB	⚠️ +3 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.464	2.417	-0.05
/ avg req/sec	1014.78	1034.33	+19.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.324	1.338	⚠️ +0.01
/error-in-render avg req/sec	1888.15	1868.52	⚠️ -19.63

Client Bundles (main, webpack, commons)

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
359.HASH.js gzip	2.96 kB	2.96 kB	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	20.9 kB	20.9 kB	✓
webpack-HASH.js gzip	1.49 kB	1.49 kB	✓
Overall change	67.4 kB	67.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.06 kB	3.06 kB	✓
amp-HASH.js gzip	554 B	554 B	✓
css-HASH.js gzip	329 B	329 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	5.58 kB	5.58 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13.9 kB	13.9 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
_buildManifest.js gzip	418 B	418 B	✓
Overall change	418 B	418 B	✓

Rendered Page Sizes

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
index.html gzip	531 B	531 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
buildDuration	11.9s	12.1s	⚠️ +210ms
buildDurationCached	4.7s	4.7s	-68ms
nodeModulesSize	49.4 MB	49.4 MB	⚠️ +3 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.519	2.542	⚠️ +0.02
/ avg req/sec	992.51	983.45	⚠️ -9.06
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.382	1.345	-0.04
/error-in-render avg req/sec	1809.17	1858.37	+49.2

Client Bundles (main, webpack, commons)

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
14.HASH.js gzip	2.98 kB	2.98 kB	✓
677f882d2ed8..HASH.js gzip	13.7 kB	13.7 kB	✓
framework.HASH.js gzip	41.8 kB	41.8 kB	✓
main-HASH.js gzip	8.39 kB	8.39 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	68 kB	68 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
_app-HASH.js gzip	791 B	791 B	✓
_error-HASH.js gzip	3.76 kB	3.76 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
hooks-HASH.js gzip	910 B	910 B	✓
index-HASH.js gzip	230 B	230 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	297 B	297 B	✓
withRouter-HASH.js gzip	293 B	293 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	8.93 kB	8.93 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	housseindjirdeh/next.js bug/#27134	Change
index.html gzip	574 B	574 B	✓
link.html gzip	588 B	588 B	✓
withRouter.html gzip	568 B	568 B	✓
Overall change	1.73 kB	1.73 kB	✓

Commit: bdf08a2

housseindjirdeh requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners July 14, 2021 22:11

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: documentation labels Jul 14, 2021

housseindjirdeh mentioned this pull request Jul 14, 2021

Double Head component inside _document breaks all onClick browser events and Link #27134

Closed

housseindjirdeh mentioned this pull request Jul 14, 2021

Common Next.js issues that could use integrated ESLint rules #27051

Closed

adds no duplicate head rule

18f9467

This comment has been minimized.

Sign in to view

ijjk approved these changes Jul 15, 2021

View reviewed changes

Merge branch 'canary' into bug/#27134

bdf08a2

ijjk merged commit c46b405 into vercel:canary Jul 15, 2021

ljosberinn mentioned this pull request Aug 11, 2021

fix(deps): update dependency @next/eslint-plugin-next to v11.1.0 - autoclosed ljosberinn/eslint-config-galex#394

Closed

1 task

flybayer pushed a commit to blitz-js/next.js that referenced this pull request Aug 19, 2021

adds no duplicate head rule (vercel#27179)

b303833

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ESLint Plugin] Adds `no-duplicate-head` rule #27179

[ESLint Plugin] Adds `no-duplicate-head` rule #27179

housseindjirdeh commented Jul 14, 2021 •

edited by ijjk

Loading

ijjk commented Jul 14, 2021

This comment has been minimized.

ijjk commented Jul 15, 2021

[ESLint Plugin] Adds no-duplicate-head rule #27179

[ESLint Plugin] Adds no-duplicate-head rule #27179

Conversation

housseindjirdeh commented Jul 14, 2021 • edited by ijjk Loading

ijjk commented Jul 14, 2021

Failing test suites

This comment has been minimized.

ijjk commented Jul 15, 2021

Stats from current PR

[ESLint Plugin] Adds `no-duplicate-head` rule #27179

[ESLint Plugin] Adds `no-duplicate-head` rule #27179

housseindjirdeh commented Jul 14, 2021 •

edited by ijjk

Loading