{"record":{"id":"9e19f20c4821537e","repo":"oxc-project/oxc","slug":"prevent-client-components-from-being-async-functio","errorCode":null,"errorMessage":"Prevent client components from being async functions.","messagePattern":"Prevent client components from being async functions\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/nextjs/no_async_client_component.rs","lineNumber":12,"sourceCode":"use oxc_ast::{\n    AstKind,\n    ast::{BindingPattern, ExportDefaultDeclarationKind, Expression, Statement},\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\n\nuse crate::{ast_util::get_declaration_of_variable, context::LintContext, rule::Rule};\n\nfn no_async_client_component_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Prevent client components from being async functions.\")\n        .with_help(\"See: https://nextjs.org/docs/messages/no-async-client-component\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoAsyncClientComponent;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Prevents the use of async functions for client components in Next.js applications.\n    /// This rule checks for any async function that:\n    /// - Is marked with \"use client\" directive\n    /// - Has a name starting with an uppercase letter (indicating it's a component)\n    /// - Is either exported as default or assigned to a variable\n    ///\n    /// ### Why is this bad?\n    ///","sourceCodeStart":1,"sourceCodeEnd":30,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/nextjs/no_async_client_component.rs#L1-L30","documentation":"Warning from oxlint rule `nextjs/no-async-client-component`. React only supports async components on the server; a component in a file with a `'use client'` directive runs in the browser, where async components cannot be rendered or hydrated. The rule flags async function components in client context at lint time, before it becomes a hydration or runtime failure.","triggerScenarios":"A file whose top-level contains `'use client'` (tracked through the module graph) that declares or exports an `async function` used as a component, including `export default async function Page()`.","commonSituations":"Adding `await` data loading to a page and also marking it `'use client'` for hooks or state; copying an async server page into a client widget; mixing React Server Component patterns from tutorials.","solutions":["Remove `'use client'` so the page becomes an async server component (best fix when no hooks/state are used).","Keep the client component but drop `async`, and load data with `useEffect` + fetch, SWR, or React Query.","Move the async fetching into a server component and pass results down as props."],"exampleFix":"// before\n'use client';\nexport default async function Page() {\n  const data = await getData();\n  return <pre>{JSON.stringify(data)}</pre>;\n}\n\n// after\nexport default async function Page() {\n  const data = await getData();\n  return <pre>{JSON.stringify(data)}</pre>;\n}","handlingStrategy":"validation","validationCode":"// fail on async exports in client files:\n// rg -l \"^'use client'\" app components | xargs rg -n 'export (default )?async function'","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Decide per file: server (async allowed, no directives) or client (no async exports) — never both.","Do data fetching in server components and pass props; use SWR/React Query in client ones.","Add an oxlint CI job with the nextjs plugin so an accidental `'use client'` + async page fails fast."],"tags":["nextjs","react-server-components","async","lint"],"backgroundTag":"async-client-component","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}