{"record":{"id":"424adc95346acaf1","repo":"facebook/react","slug":"cannot-have-both-use-client-and-use-server-dir","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-esm/src/ReactFlightESMNodeLoader.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-esm/src/ReactFlightESMNodeLoader.js#L702-L738","documentation":"Part of the RSC contract enforced at load time. The react-server-dom-esm loader parses each module's leading directives; a file can be a Client Component boundary ('use client') or a Server Functions boundary ('use server'), but not both. A file with both would have to be emitted simultaneously as a client reference and as a server reference, which no bundler supports, so transformModuleIfNeeded throws at import time.","triggerScenarios":"A source file containing both 'use client' and 'use server' among its top-level directives is imported (directly or transitively) while the react-server-dom-esm loader is active.","commonSituations":"Refactoring that moves server actions into an existing client component file; copy-pasting a directive block from another module; incrementally adding 'use server' to a file that already had 'use client'; examples that mix both patterns in one snippet.","solutions":["Split the file: keep 'use client' components in one module and move the server functions to a separate 'use server' module","Import the server functions from the client file; the bundler turns them into server references automatically","Alternatively inline 'use server' inside individual async function bodies in a server-side file"],"exampleFix":"// before — App.jsx declares both directives\n'use client';\n'use server';\nexport default function App() { /* ... */ }\n\n// after — App.jsx\n'use client';\nimport {saveNote} from './note-actions';\nexport default function App() { /* calls saveNote in an event handler */ }\n\n// after — note-actions.js\n'use server';\nexport async function saveNote(note) { /* ... */ }","handlingStrategy":"validation","validationCode":"// run over every source file in CI before build\nexport function checkMixedDirectives(path, src) {\n  const head = src.slice(0, 1000);\n  if (head.includes('use client') && head.includes('use server')) {\n    throw new Error(path + \": file declares both 'use client' and 'use server'\");\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["One directive per file — decide the boundary when creating the file","Keep server actions in dedicated *.actions.js files","Add the CI scan above so the mistake fails the build, not the runtime"],"tags":["use-client","use-server","react-server-components","directives","rsc"],"backgroundTag":"use-client-use-server-conflict","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}