adds no duplicate head rule (#27179)

vercel · Jul 15, 2021 · c46b405 · c46b405
1 parent d29a95a
commit c46b405
Show file tree

Hide file tree

Showing 5 changed files with 241 additions and 0 deletions.
diff --git a/errors/manifest.json b/errors/manifest.json
@@ -279,6 +279,10 @@
           "title": "no-document-viewport-meta",
           "path": "/errors/no-document-viewport-meta.md"
         },
+        {
+          "title": "no-duplicate-head",
+          "path": "/errors/no-duplicate-head.md"
+        },
         {
           "title": "no-head-import-in-document",
           "path": "/errors/no-head-import-in-document.md"

diff --git a/errors/no-duplicate-head.md b/errors/no-duplicate-head.md
@@ -0,0 +1,38 @@
+# No Duplicate Head
+
+### Why This Error Occurred
+
+More than a single instance of the `<Head />` component was used in a single custom document. This can cause unexpected behavior in your application.
+
+### Possible Ways to Fix It
+
+Only use a single `<Head />` component in your custom document in `pages/_document.js`.
+
+```jsx
+// pages/_document.js
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    //...
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
+```
+
+### Useful Links
+
+- [Custom Document](https://nextjs.org/docs/advanced-features/custom-document)
diff --git a/packages/eslint-plugin-next/lib/index.js b/packages/eslint-plugin-next/lib/index.js
@@ -12,6 +12,7 @@ module.exports = {
     'link-passhref': require('./rules/link-passhref'),
     'no-document-import-in-page': require('./rules/no-document-import-in-page'),
     'no-head-import-in-document': require('./rules/no-head-import-in-document'),
+    'no-duplicate-head': require('./rules/no-duplicate-head'),
   },
   configs: {
     recommended: {
@@ -29,6 +30,7 @@ module.exports = {
         '@next/next/link-passhref': 1,
         '@next/next/no-document-import-in-page': 2,
         '@next/next/no-head-import-in-document': 2,
+        '@next/next/no-duplicate-head': 2,
       },
     },
   },

diff --git a/packages/eslint-plugin-next/lib/rules/no-duplicate-head.js b/packages/eslint-plugin-next/lib/rules/no-duplicate-head.js
@@ -0,0 +1,55 @@
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Enforce no duplicate usage of <Head> in pages/document.js',
+      recommended: true,
+    },
+  },
+  create: function (context) {
+    let documentImportName
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === 'next/document') {
+          const documentImport = node.specifiers.find(
+            ({ type }) => type === 'ImportDefaultSpecifier'
+          )
+          if (documentImport && documentImport.local) {
+            documentImportName = documentImport.local.name
+          }
+        }
+      },
+      ReturnStatement(node) {
+        const ancestors = context.getAncestors()
+        const documentClass = ancestors.find(
+          (ancestorNode) =>
+            ancestorNode.type === 'ClassDeclaration' &&
+            ancestorNode.superClass &&
+            ancestorNode.superClass.name === documentImportName
+        )
+
+        if (!documentClass) {
+          return
+        }
+
+        if (node.argument && node.argument.children) {
+          const headComponents = node.argument.children.filter(
+            (childrenNode) =>
+              childrenNode.openingElement &&
+              childrenNode.openingElement.name &&
+              childrenNode.openingElement.name.name === 'Head'
+          )
+
+          if (headComponents.length > 1) {
+            for (let i = 1; i < headComponents.length; i++) {
+              context.report({
+                node: headComponents[i],
+                message:
+                  'Do not include multiple instances of <Head/>. See: https://nextjs.org/docs/messages/no-duplicate-head',
+              })
+            }
+          }
+        }
+      },
+    }
+  },
+}
diff --git a/test/eslint-plugin-next/no-duplicate-head.test.js b/test/eslint-plugin-next/no-duplicate-head.test.js
@@ -0,0 +1,142 @@
+const rule = require('@next/eslint-plugin-next/lib/rules/no-duplicate-head')
+
+const RuleTester = require('eslint').RuleTester
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      jsx: true,
+    },
+  },
+})
+
+var ruleTester = new RuleTester()
+ruleTester.run('no-duplicate-head', rule, {
+  valid: [
+    {
+      code: `import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+      class MyDocument extends Document {
+        static async getInitialProps(ctx) {
+          //...
+        }
+      
+        render() {
+          return (
+            <Html>
+              <Head/>
+            </Html>
+          )
+        }
+      }
+      
+      export default MyDocument
+    `,
+      filename: 'pages/_document.js',
+    },
+    {
+      code: `import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+      class MyDocument extends Document {      
+        render() {
+          return (
+            <Html>
+              <Head>
+                <meta charSet="utf-8" />
+                <link
+                  href="https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+                  rel="stylesheet"
+                />
+              </Head>
+            </Html>
+          )
+        }
+      }
+      
+      export default MyDocument
+    `,
+      filename: 'pages/_document.tsx',
+    },
+  ],
+  invalid: [
+    {
+      code: `
+      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
+      `,
+      filename: 'pages/_document.js',
+      errors: [
+        {
+          message:
+            'Do not include multiple instances of <Head/>. See: https://nextjs.org/docs/messages/no-duplicate-head',
+          type: 'JSXElement',
+        },
+        {
+          message:
+            'Do not include multiple instances of <Head/>. See: https://nextjs.org/docs/messages/no-duplicate-head',
+          type: 'JSXElement',
+        },
+      ],
+    },
+    {
+      code: `
+      import Document, { Html, Main, NextScript } from 'next/document'
+      import Head from 'next/head'
+      
+      class MyDocument extends Document {
+        render() {
+          return (
+            <Html>
+              <Head>
+                <meta charSet="utf-8" />
+                <link
+                  href="https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+                  rel="stylesheet"
+                />
+              </Head>
+              <body>
+                <Main />
+                <NextScript />
+              </body>
+              <Head>
+                <script
+                  dangerouslySetInnerHTML={{
+                    __html: '',
+                  }}
+                />
+              </Head>
+            </Html>
+          )
+        }
+      }
+      
+      export default MyDocument
+      `,
+      filename: 'pages/_document.page.tsx',
+      errors: [
+        {
+          message:
+            'Do not include multiple instances of <Head/>. See: https://nextjs.org/docs/messages/no-duplicate-head',
+          type: 'JSXElement',
+        },
+      ],
+    },
+  ],
+})