{"record":{"id":"37baca704b43d1db","repo":"facebook/react","slug":"cannot-have-both-use-client-and-use-server-dir-37baca","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-webpack/src/ReactFlightWebpackNodeLoader.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-webpack/src/ReactFlightWebpackNodeLoader.js#L702-L738","documentation":"The webpack node loader parses a module's leading directives and requires exactly one boundary: a file is either a client boundary ('use client') or a server-action module ('use server'). Both directives in one file would make the module simultaneously a client-reference proxy and a server-function bundle, which is meaningless, so the loader throws at transform time.","triggerScenarios":"A file whose top-level directive prologue contains both 'use client' and 'use server' (in either order) being processed by react-server-dom-webpack/node-loader.","commonSituations":"Copy-pasting a client component into a server-actions file and leaving both directives | Merging files during refactors | Commented-out vs active directive confusion after switching a file's role","solutions":["Split the file into a 'use client' module and a 'use server' module","Delete whichever directive no longer matches the file's role","Move shared code between them into a plain module with no directive"],"exampleFix":"// before: both directives in one file\n'use client';\n'use server';\nexport default function C(){...}\n\n// after: two files\n// C.client.js: 'use client'; export default function C(){...}\n// actions.server.js: 'use server'; export function act(){...}","handlingStrategy":"validation","validationCode":"// Pre-build lint: no file may contain both directives\n// check-directives.mjs (run in CI)\nfor (const f of files) {\n  const src = read(f);\n  if (/^\\s*['\\\"]use client['\\\"].*^\\s*['\\\"]use server['\\\"]/ms.test(src) ||\n      /^\\s*['\\\"]use server['\\\"].*^\\s*['\\\"]use client['\\\"]/ms.test(src)) {\n    fail(`${f} has both 'use client' and 'use server'`);\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["One directive per file, at the very top","Split components and actions during refactors instead of merging files","Add the CI regex check above to catch regressions"],"tags":["react-server-components","use-client","use-server","directives","webpack-loader"],"backgroundTag":"conflicting-module-directives","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}