ESLint Plugin: Fix Document and Head import rules (vercel#25730)

blitz-js · Jun 7, 2021 · 1ec7c17 · 1ec7c17
1 parent 5037bfb
commit 1ec7c17
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 4 deletions.
diff --git a/errors/no-document-import-in-page.md b/errors/no-document-import-in-page.md
@@ -2,11 +2,11 @@
 
 ### Why This Error Occurred
 
-`next/document` was imported in a page outside of `pages/_document.js`. This can cause unexpected issues in your application.
+`next/document` was imported in a page outside of `pages/_document.js` (or `pages/_document.tsx` if you are using TypeScript). This can cause unexpected issues in your application.
 
 ### Possible Ways to Fix It
 
-Only import and use `next/document` within `pages/_document.js` to override the default `Document` component:
+Only import and use `next/document` within `pages/_document.js` (or `pages/_document.tsx`) to override the default `Document` component:
 
 ```jsx
 // pages/_document.js

diff --git a/packages/eslint-plugin-next/lib/rules/no-document-import-in-page.js b/packages/eslint-plugin-next/lib/rules/no-document-import-in-page.js
@@ -16,7 +16,7 @@ module.exports = {
         }
 
         const page = context.getFilename().split('pages')[1]
-        if (!page || path.parse(page).name === '_document') {
+        if (!page || path.parse(page).name.startsWith('_document')) {
           return
         }
 

diff --git a/packages/eslint-plugin-next/lib/rules/no-head-import-in-document.js b/packages/eslint-plugin-next/lib/rules/no-head-import-in-document.js
@@ -15,7 +15,7 @@ module.exports = {
         }
 
         const document = context.getFilename().split('pages')[1]
-        if (!document || path.parse(document).name !== '_document') {
+        if (!document || !path.parse(document).name.startsWith('_document')) {
           return
         }
 

diff --git a/test/eslint-plugin-next/no-document-import-in-page.unit.test.js b/test/eslint-plugin-next/no-document-import-in-page.unit.test.js
@@ -44,6 +44,20 @@ ruleTester.run('no-document-import-in-page', rule, {
     `,
       filename: 'pages/_document.tsx',
     },
+    {
+      code: `import Document from "next/document"
+
+    export default class MyDocument extends Document {
+      render() {
+        return (
+          <Html>
+          </Html>
+        );
+      }
+    }
+    `,
+      filename: 'pages/_document.page.tsx',
+    },
   ],
   invalid: [
     {

diff --git a/test/eslint-plugin-next/no-head-import-in-document.unit.test.js b/test/eslint-plugin-next/no-head-import-in-document.unit.test.js
@@ -84,5 +84,35 @@ ruleTester.run('no-head-import-in-document', rule, {
         },
       ],
     },
+    {
+      code: `
+      import Document, { Html, Main, NextScript } from 'next/document'
+      import Head from 'next/head'
+      
+      class MyDocument extends Document {
+        render() {
+          return (
+            <Html>
+              <Head />
+              <body>
+                <Main />
+                <NextScript />
+              </body>
+            </Html>
+          )
+        }
+      }
+      
+      export default MyDocument
+      `,
+      filename: 'pages/_document.page.tsx',
+      errors: [
+        {
+          message:
+            'next/head should not be imported in pages/_document.page.tsx. Import Head from next/document instead. See https://nextjs.org/docs/messages/no-head-import-in-document.',
+          type: 'ImportDeclaration',
+        },
+      ],
+    },
   ],
 })