facebook/react · error · Error

Cannot have both "use client" and "use server" directives in

Error message

Cannot have both "use client" and "use server" directives in the same file.

What it means

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.

Source

Thrown at packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js:70

    for (let i = 0; i < body.length; i++) {
      const node = body[i];
      if (node.type !== 'ExpressionStatement' || !node.directive) {
        break;
      }
      if (node.directive === 'use client') {
        useClient = true;
      }
      if (node.directive === 'use server') {
        useServer = true;
      }
    }

    if (!useClient && !useServer) {
      return originalCompile.apply(this, arguments);
    }

    if (useClient && useServer) {
      throw new Error(
        'Cannot have both "use client" and "use server" directives in the same file.',
      );
    }

    if (useClient) {
      const moduleId: string = url.pathToFileURL(filename).href as any;
      this.exports = createClientModuleProxy(moduleId);
    }

    if (useServer) {
      originalCompile.apply(this, arguments);

      const moduleId: string = url.pathToFileURL(filename).href as any;

      const exports = this.exports;

      // This module is imported server to server, but opts in to exposing functions by
      // reference. If there are any functions in the export.

View on GitHub (pinned to eafeac097b)

Solutions

1. Fix the file: keep only one directive (split client components and server actions into separate files)
2. Move shared logic to a neutral module
3. If the file is generated, fix the generator so it emits exactly one directive per output file

Example fix

// before: generated file with both banners
'use client';
'use server';
module.exports = {...};

// after: generator emits one file per role
// client.part.js: 'use client'; ...
// server.part.js: 'use server'; ...

// Same check applies to CJS sources run under register()
const bothDirectives = /^[\s\S]{0,200}?['\"]use client['\"][\s\S]*['\"]use server['\"]/m.test(source);
if (bothDirectives) throw new Error('split the file before registering');

When it happens

Trigger: Running under require('react-server-dom-webpack/node-register') and loading a CJS module whose prologue contains both directives.

Common situations: 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

Related errors

• Cannot have both "use client" and "use server" directives in
• Cannot have both "use client" and "use server" directives in
• Cannot have both "use client" and "use server" directives in
• Cannot have both "use client" and "use server" directives in
• react-dom/client is not supported in React Server Components

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/bc0a84d1b83cc22b. Report an issue: GitHub.