{"record":{"id":"a52662ff760193db","repo":"facebook/react","slug":"cannot-have-both-use-client-and-use-server-dir-a52662","errorCode":null,"errorMessage":"Cannot have both \"use client\" and \"use server\" directives in the same file.","messagePattern":"Cannot have both \"use client\" and \"use server\" directives in the same file\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeLoader.js","lineNumber":720,"sourceCode":"  for (let i = 0; i < body.length; i++) {\n    const node = body[i];\n    if (node.type !== 'ExpressionStatement' || !node.directive) {\n      break;\n    }\n    if (node.directive === 'use client') {\n      useClient = true;\n    }\n    if (node.directive === 'use server') {\n      useServer = true;\n    }\n  }\n\n  if (!useClient && !useServer) {\n    return source;\n  }\n\n  if (useClient && useServer) {\n    throw new Error(\n      'Cannot have both \"use client\" and \"use server\" directives in the same file.',\n    );\n  }\n\n  let sourceMap = null;\n  if (sourceMappingURL) {\n    const sourceMapResult = await loader(\n      sourceMappingURL,\n      // $FlowFixMe[incompatible-type]\n      {\n        format: 'json',\n        conditions: [],\n        importAssertions: {type: 'json'},\n        importAttributes: {type: 'json'},\n      },\n      loader,\n    );\n    const sourceMapString =","sourceCodeStart":702,"sourceCodeEnd":738,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeLoader.js#L702-L738","documentation":"The unbundled Node loader parses each module's directives before transforming it. A file that carries both 'use client' and 'use server' is ambiguous — the bundler would have to both proxy its exports to the client and register its exports as server actions — so the loader rejects it up front with this error.","triggerScenarios":"A source file processed by the RSC node loader whose top-of-file directives include both `\"use client\"` and `\"use server\"` (in either order).","commonSituations":"Copy-pasting a server action into a client component file (or vice versa) and leaving both directives; refactoring a file's role without removing the old directive; directive-like string literals at top level that the parser counts as directives.","solutions":["Split the file: keep 'use client' in the component file and move server actions into a separate 'use server' module.","Delete the directive that does not match the file's role.","Re-run; the loader only throws after it has confirmed at least one directive exists, so a file with a single directive loads normally."],"exampleFix":"// before: Button.js\n\"use client\";\n\"use server\";\nexport function Button() {}\nexport async function save() {}\n\n// after: Button.js + actions.js\n// Button.js\n\"use client\";\nexport function Button() {}\n// actions.js\n\"use server\";\nexport async function save() {}","handlingStrategy":"validation","validationCode":"// CI guard: reject files with both directives\nconst fs = require('fs');\nfor (const f of files) {\n  const src = fs.readFileSync(f, 'utf8');\n  if (/^[\"']use client[\"']/m.test(src) && /^[\"']use server[\"']/m.test(src)) {\n    throw new Error(`${f} has both \"use client\" and \"use server\"`);\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep server actions in dedicated 'use server' modules.","Run the dual-directive scan in CI or a pre-commit hook.","Review directive placement when merging client and server code by hand."],"tags":["rsc","react-server-components","use-client","use-server","directives","node-loader","unbundled"],"backgroundTag":"rsc-dual-directives-conflict","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}