feat: Introduce eslint rule for async client components

docs/02-app/01-building-your-application/06-configuring/02-eslint.mdx

@@ -88,6 +88,7 @@ Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/
 | <Check size={18} /> | [@next/next/inline-script-id](/docs/messages/inline-script-id)                                                           | Enforce `id` attribute on `next/script` components with inline content.                                          |
 | <Check size={18} /> | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga)                                                       | Prefer `next/script` component when using the inline script for Google Analytics.                                |
 | <Check size={18} /> | [@next/next/no-assign-module-variable](/docs/messages/no-assign-module-variable)                                         | Prevent assignment to the `module` variable.                                                                     |
+| <Check size={18} /> | [@next/next/no-async-client-component](/docs/messages/no-async-client-component)                                         | Prevent client components from being async functions.                                                            |
 | <Check size={18} /> | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document) | Prevent usage of `next/script`'s `beforeInteractive` strategy outside of `pages/_document.js`.                   |
 | <Check size={18} /> | [@next/next/no-css-tags](/docs/messages/no-css-tags)                                                                     | Prevent manual stylesheet tags.                                                                                  |
 | <Check size={18} /> | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page)                                       | Prevent importing `next/document` outside of `pages/_document.js`.                                               |

errors/no-async-client-component.md

@@ -0,0 +1,12 @@
+# No async client component
+
+> Client components cannot be async functions.
+
+#### Why This Error Occurred
+
+As per the [React Server Component RFC on promise support](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md), [client components cannot be async functions](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#why-cant-client-components-be-async-functions).
+
+#### Possible Ways to Fix It
+
+1. Remove the `async` keyword from the client component function declaration, or
+2. Convert the client component to a server component

packages/eslint-plugin-next/src/index.ts

@@ -5,6 +5,7 @@ module.exports = {
     'inline-script-id': require('./rules/inline-script-id'),
     'next-script-for-ga': require('./rules/next-script-for-ga'),
     'no-assign-module-variable': require('./rules/no-assign-module-variable'),
+    'no-async-client-component': require('./rules/no-async-client-component'),
     'no-before-interactive-script-outside-document': require('./rules/no-before-interactive-script-outside-document'),
     'no-css-tags': require('./rules/no-css-tags'),
     'no-document-import-in-page': require('./rules/no-document-import-in-page'),
@@ -43,6 +44,7 @@ module.exports = {
         // errors
         '@next/next/inline-script-id': 'error',
         '@next/next/no-assign-module-variable': 'error',
+        '@next/next/no-async-client-component': 'error',
         '@next/next/no-document-import-in-page': 'error',
         '@next/next/no-duplicate-head': 'error',
         '@next/next/no-head-import-in-document': 'error',

packages/eslint-plugin-next/src/rules/no-async-client-component.ts

@@ -0,0 +1,68 @@
+import { defineRule } from '../utils/define-rule'
+
+const url = 'https://nextjs.org/docs/messages/no-async-client-component'
+const description = 'Prevent client components from being async functions.'
+const message = `${description} See: ${url}`
+
+export = defineRule({
+  meta: {
+    docs: {
+      description,
+      recommended: true,
+      url,
+    },
+    type: 'problem',
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      Program(node) {
+        let isClientComponent: boolean = false
+
+        for (const block of node.body) {
+          if (
+            block.type === 'ExpressionStatement' &&
+            block.expression.type === 'Literal' &&
+            block.expression.value === 'use client'
+          ) {
+            isClientComponent = true
+          }
+
+          if (block.type === 'ExportDefaultDeclaration' && isClientComponent) {
+            // export default async function MyComponent() {...}
+            if (
+              block.declaration.type === 'FunctionDeclaration' &&
+              block.declaration.async
+            ) {
+              context.report({
+                node: block,
+                message,
+              })
+            }
+
+            // async function MyComponent() {...}; export default MyComponent;
+            if (block.declaration.type === 'Identifier') {
+              const functionName = block.declaration.name
+              const functionDeclaration = node.body.find(
+                (localBlock) =>
+                  localBlock.type === 'FunctionDeclaration' &&
+                  localBlock.id.name === functionName
+              )
+
+              if (
+                functionDeclaration.type === 'FunctionDeclaration' &&
+                functionDeclaration.async
+              ) {
+                context.report({
+                  node: functionDeclaration,
+                  message,
+                })
+              }
+            }
+          }
+        }
+      },
+    }
+  },
+})

test/unit/eslint-plugin-next/no-async-client-component.test.ts

@@ -0,0 +1,72 @@
+import rule from '@next/eslint-plugin-next/dist/rules/no-async-client-component'
+import { RuleTester } from 'eslint'
+;(RuleTester as any).setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      jsx: true,
+    },
+  },
+})
+const ruleTester = new RuleTester()
+
+const message =
+  'Prevent client components from being async functions. See: https://nextjs.org/docs/messages/no-async-client-component'
+
+ruleTester.run('no-async-client-component single line', rule, {
+  valid: [
+    `
+    export default async function MyComponent() {
+      return <></>
+    }
+    `,
+  ],
+  invalid: [
+    {
+      code: `
+      "use client"
+
+      export default async function MyComponent() {
+        return <></>
+      }
+      `,
+      errors: [
+        {
+          message,
+        },
+      ],
+    },
+  ],
+})
+
+ruleTester.run('no-async-client-component multiple line', rule, {
+  valid: [
+    `
+    async function MyComponent() {
+      return <></>
+    }
+
+    export default MyComponent
+    `,
+  ],
+  invalid: [
+    {
+      code: `
+      "use client"
+
+      async function MyComponent() {
+        return <></>
+      }
+
+      export default MyComponent
+      `,
+      errors: [
+        {
+          message,
+        },
+      ],
+    },
+  ],
+})