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

Source

Thrown at packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.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

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

Example fix

// before: both directives in one file
'use client';
'use server';
export default function C(){...}

// after: two files
// C.client.js: 'use client'; export default function C(){...}
// actions.server.js: 'use server'; export function act(){...}

Defensive patterns

Strategy: validation

Validate before calling

// Pre-build lint: no file may contain both directives
// check-directives.mjs (run in CI)
for (const f of files) {
  const src = read(f);
  if (/^\s*['\"]use client['\"].*^\s*['\"]use server['\"]/ms.test(src) ||
      /^\s*['\"]use server['\"].*^\s*['\"]use client['\"]/ms.test(src)) {
    fail(`${f} has both 'use client' and 'use server'`);
  }
}

Prevention

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

When it happens

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

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

Related errors

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