Fix eslint async client component (#51952)

Fixes #51917 It's throwing error in arrow function, should also be covered in the lint rule fix NEXT-1326
vercel · Jun 29, 2023 · f4b947f · f4b947f
1 parent 15b84c1
commit f4b947f
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 8 deletions.
diff --git a/packages/eslint-plugin-next/src/rules/no-async-client-component.ts b/packages/eslint-plugin-next/src/rules/no-async-client-component.ts
@@ -36,7 +36,7 @@ export = defineRule({
           if (block.type === 'ExportDefaultDeclaration' && isClientComponent) {
             // export default async function MyComponent() {...}
             if (
-              block.declaration.type === 'FunctionDeclaration' &&
+              block.declaration?.type === 'FunctionDeclaration' &&
               block.declaration.async &&
               isCapitalized(block.declaration.id.name)
             ) {
@@ -51,22 +51,55 @@ export = defineRule({
               block.declaration.type === 'Identifier' &&
               isCapitalized(block.declaration.name)
             ) {
-              const functionName = block.declaration.name
-              const functionDeclaration = node.body.find(
-                (localBlock) =>
+              const targetName = block.declaration.name
+
+              const functionDeclaration = node.body.find((localBlock) => {
+                if (
                   localBlock.type === 'FunctionDeclaration' &&
-                  localBlock.id.name === functionName
-              )
+                  localBlock.id.name === targetName
+                )
+                  return true
+
+                if (
+                  localBlock.type === 'VariableDeclaration' &&
+                  localBlock.declarations.find(
+                    (declaration) =>
+                      declaration.id?.type === 'Identifier' &&
+                      declaration.id.name === targetName
+                  )
+                )
+                  return true
+
+                return false
+              })
 
               if (
-                functionDeclaration.type === 'FunctionDeclaration' &&
+                functionDeclaration?.type === 'FunctionDeclaration' &&
                 functionDeclaration.async
               ) {
                 context.report({
                   node: functionDeclaration,
                   message,
                 })
               }
+
+              if (functionDeclaration?.type === 'VariableDeclaration') {
+                const varDeclarator = functionDeclaration.declarations.find(
+                  (declaration) =>
+                    declaration.id?.type === 'Identifier' &&
+                    declaration.id.name === targetName
+                )
+
+                if (
+                  varDeclarator?.init?.type === 'ArrowFunctionExpression' &&
+                  varDeclarator.init.async
+                ) {
+                  context.report({
+                    node: functionDeclaration,
+                    message,
+                  })
+                }
+              }
             }
           }
         }

diff --git a/test/unit/eslint-plugin-next/no-async-client-component.test.ts b/test/unit/eslint-plugin-next/no-async-client-component.test.ts
@@ -103,7 +103,7 @@ ruleTester.run('no-async-client-component multiple line capitalization', rule, {
   valid: [
     `
     "use client"
-    
+
     async function myFunction() {
       return ''
     }
@@ -130,3 +130,35 @@ ruleTester.run('no-async-client-component multiple line capitalization', rule, {
     },
   ],
 })
+
+ruleTester.run('no-async-client-component arrow function', rule, {
+  valid: [
+    `
+    "use client"
+
+    const myFunction = () => {
+      return ''
+    }
+
+    export default myFunction
+    `,
+  ],
+  invalid: [
+    {
+      code: `
+      "use client"
+
+      const MyFunction = async () => {
+        return '123'
+      }
+
+      export default MyFunction
+      `,
+      errors: [
+        {
+          message,
+        },
+      ],
+    },
+  ],
+})