{"record":{"id":"bc0a84d1b83cc22b","repo":"facebook/react","slug":"cannot-have-both-use-client-and-use-server-dir-bc0a84","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/ReactFlightWebpackNodeRegister.js","lineNumber":70,"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 originalCompile.apply(this, arguments);\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    if (useClient) {\n      const moduleId: string = url.pathToFileURL(filename).href as any;\n      this.exports = createClientModuleProxy(moduleId);\n    }\n\n    if (useServer) {\n      originalCompile.apply(this, arguments);\n\n      const moduleId: string = url.pathToFileURL(filename).href as any;\n\n      const exports = this.exports;\n\n      // This module is imported server to server, but opts in to exposing functions by\n      // reference. If there are any functions in the export.","sourceCodeStart":52,"sourceCodeEnd":88,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js#L52-L88","documentation":"The CJS register hook (react-server-dom-webpack/node-register, patching Module.prototype compile) applies the same single-directive rule as the loader: it scans directives before deciding whether to wrap the module as a client proxy or compile it as a server module. Finding both 'use client' and 'use server' is ambiguous, so compile of that module throws.","triggerScenarios":"Running under require('react-server-dom-webpack/node-register') and loading a CJS module whose prologue contains both directives.","commonSituations":"Dev setups using register() instead of the webpack loader hitting the same malformed file | Files converted between client and server roles where the old directive remained | Codegen that concatenates directive banners","solutions":["Fix the file: keep only one directive (split client components and server actions into separate files)","Move shared logic to a neutral module","If the file is generated, fix the generator so it emits exactly one directive per output file"],"exampleFix":"// before: generated file with both banners\n'use client';\n'use server';\nmodule.exports = {...};\n\n// after: generator emits one file per role\n// client.part.js: 'use client'; ...\n// server.part.js: 'use server'; ...","handlingStrategy":"validation","validationCode":"// Same check applies to CJS sources run under register()\nconst bothDirectives = /^[\\s\\S]{0,200}?['\\\"]use client['\\\"][\\s\\S]*['\\\"]use server['\\\"]/m.test(source);\nif (bothDirectives) throw new Error('split the file before registering');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep client proxies and server actions in separate files in register-based dev setups","Fix generators to emit one directive per output file","Run the directive check in a pretest script"],"tags":["react-server-components","use-client","use-server","directives","commonjs"],"backgroundTag":"conflicting-module-directives","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}