Disable head element lint rule for appDir (#40921)

Only lint `<head>` elements usage in `pages/`, `<head>` should be able to use in appDir
vercel · Sep 26, 2022 · 82682a3 · 82682a3
1 parent 3837aa1
commit 82682a3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/eslint-plugin-next/lib/rules/no-head-element.js b/packages/eslint-plugin-next/lib/rules/no-head-element.js
@@ -14,7 +14,11 @@ module.exports = {
   create: function (context) {
     return {
       JSXOpeningElement(node) {
-        if (node.name.name !== 'head') {
+        const paths = context.getFilename()
+
+        const isInAppDir = paths.includes('app/') && !paths.includes('pages/')
+        // Only lint the <head> element in pages directory
+        if (node.name.name !== 'head' || isInAppDir) {
           return
         }
 

diff --git a/test/unit/eslint-plugin-next/no-head-element.test.ts b/test/unit/eslint-plugin-next/no-head-element.test.ts
@@ -48,6 +48,21 @@ ruleTester.run('no-head-element', rule, {
     `,
       filename: 'pages/index.tsx',
     },
+    {
+      code: `
+      export default function Layout({ children }) {
+        return (
+          <html>
+            <head>
+              <title>layout</title>
+            </head>
+            <body>{children}</body>
+          </html>
+        );
+      }
+    `,
+      filename: './app/layout.js',
+    },
   ],
   invalid: [
     {
@@ -63,7 +78,7 @@ ruleTester.run('no-head-element', rule, {
           );
         }
       }`,
-      filename: 'pages/index.js',
+      filename: './pages/index.js',
       errors: [
         {
           message: