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 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.

Source

Thrown at packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeLoader.js:720

  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 source;
  }

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

  let sourceMap = null;
  if (sourceMappingURL) {
    const sourceMapResult = await loader(
      sourceMappingURL,
      // $FlowFixMe[incompatible-type]
      {
        format: 'json',
        conditions: [],
        importAssertions: {type: 'json'},
        importAttributes: {type: 'json'},
      },
      loader,
    );
    const sourceMapString =

View on GitHub (pinned to eafeac097b)

Solutions

1. Split the file: keep 'use client' in the component file and move server actions into a separate 'use server' module.
2. Delete the directive that does not match the file's role.
3. Re-run; the loader only throws after it has confirmed at least one directive exists, so a file with a single directive loads normally.

Example fix

// before: Button.js
"use client";
"use server";
export function Button() {}
export async function save() {}

// after: Button.js + actions.js
// Button.js
"use client";
export function Button() {}
// actions.js
"use server";
export async function save() {}

// CI guard: reject files with both directives
const fs = require('fs');
for (const f of files) {
  const src = fs.readFileSync(f, 'utf8');
  if (/^["']use client["']/m.test(src) && /^["']use server["']/m.test(src)) {
    throw new Error(`${f} has both "use client" and "use server"`);
  }
}

When it happens

Trigger: A source file processed by the RSC node loader whose top-of-file directives include both `"use client"` and `"use server"` (in either order).

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

Related errors

• Cannot have both "use client" and "use server" directives in
• Cannot have both "use client" and "use server" directives in
• The source map has more mappings than there are lines.
• Attempted to call the default export of ${url} from the serv
• Attempted to call ${name}() from the server but ${name} is o

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