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

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.

Source

Thrown at packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.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' components in one module and move the server functions to a separate 'use server' module
2. Import the server functions from the client file; the bundler turns them into server references automatically
3. Alternatively inline 'use server' inside individual async function bodies in a server-side file

Example fix

// before — App.jsx declares both directives
'use client';
'use server';
export default function App() { /* ... */ }

// after — App.jsx
'use client';
import {saveNote} from './note-actions';
export default function App() { /* calls saveNote in an event handler */ }

// after — note-actions.js
'use server';
export async function saveNote(note) { /* ... */ }

// run over every source file in CI before build
export function checkMixedDirectives(path, src) {
  const head = src.slice(0, 1000);
  if (head.includes('use client') && head.includes('use server')) {
    throw new Error(path + ": file declares both 'use client' and 'use server'");
  }
}

When it happens

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

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

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
• Client Functions cannot be passed directly to Server Functio

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