facebook/react · error · Error

375

375

Error message

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.%s

What it means

The general function case: a plain function value (not an event handler, not a child) is being passed as a prop from a Server Component to a Client Component. The Flight wire format only carries functions that are explicitly exposed Server References, so any other function hits this error. The message offers both outs: mark it 'use server' if you intended a callable action, or stop passing it if you meant to call it.

Source

Thrown at packages/react-server/src/ReactFlightServer.js:4289

      );
    } else if (
      __DEV__ &&
      (jsxChildrenParents.has(parent) ||
        (jsxPropsParents.has(parent) && parentPropertyName === 'children'))
    ) {
      const componentName = value.displayName || value.name || 'Component';
      throw new Error(
        'Functions are not valid as a child of Client Components. This may happen if ' +
          'you return ' +
          componentName +
          ' instead of <' +
          componentName +
          ' /> from render. ' +
          'Or maybe you meant to call this function rather than return it.' +
          describeObjectForErrorMessage(parent, parentPropertyName),
      );
    } else {
      throw new Error(
        'Functions cannot be passed directly to Client Components ' +
          'unless you explicitly expose it by marking it with "use server". ' +
          'Or maybe you meant to call this function rather than return it.' +
          describeObjectForErrorMessage(parent, parentPropertyName),
      );
    }
  }

  if (typeof value === 'symbol') {
    const writtenSymbols = request.writtenSymbols;
    const existingId = writtenSymbols.get(value);
    if (existingId !== undefined) {
      return serializeByValueID(existingId);
    }
    // $FlowFixMe[incompatible-type] `description` might be undefined
    const name: string = value.description;

    if (Symbol.for(name) !== value) {

View on GitHub (pinned to eafeac097b)

Solutions

1. If the function should run on the client, move it (or the component using it) into a 'use client' module.
2. If it should run on the server, add 'use server' to expose it as a Server Action and pass the reference.
3. Replace the function with serializable configuration (a preset name or options object) that the client maps back to behavior.

Example fix

// before
<ClientTable sort={(a, b) => a.id - b.id} rows={rows} />

// after — behavior selected by data
<ClientTable sort="byId" rows={rows} />
// ClientTable.tsx ('use client') maps 'byId' to a local comparator

export function scanPropsForFunctions(props: Record<string, unknown>, path = ''): string[] {
  const out: string[] = [];
  for (const [k, v] of Object.entries(props)) {
    if (typeof v === 'function') out.push(path + k);
    else if (v && typeof v === 'object' && !(v instanceof Date)) out.push(...scanPropsForFunctions(v as any, path + k + '.'));
  }
  return out;
}

export function isServerAction(v: unknown): boolean {
  return typeof v === 'function' && String((v as any).$$typeof ?? '').includes('react.server.reference');
}

When it happens

Trigger: <ClientList sort={(a, b) => a.id - b.id}/>; <ClientChart formatter={v => v + 'px'}/>; passing any comparator, predicate, or utility callback from a server file into a client component's props.

Common situations: Passing formatters, sorters, predicates, or class-static helpers as props; sharing utility modules between server and client trees; migrating callback-style APIs into RSC pages.

Related errors

• 374
• 526
• 379
• 498
• 526

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