facebook/react · error · Error

Attempted to call ${String(name)}() from the server but ${St

Error message

Attempted to call ${String(name)}() from the server but ${String(name)} is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

What it means

Each named export of a 'use client' module becomes a registered client reference whose call body throws when invoked: client code cannot run on the server, so the reference may only be rendered as a component or forwarded as a prop to another client component.

Source

Thrown at packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js:300

        return then;
      } else {
        // Since typeof .then === 'function' is a feature test we'd continue recursing
        // indefinitely if we return a function. Instead, we return an object reference
        // if we check further.
        return undefined;
      }
  }
  if (typeof name === 'symbol') {
    throw new Error(
      'Cannot read Symbol exports. Only named exports are supported on a client module ' +
        'imported on the server.',
    );
  }
  let cachedReference = target[name];
  if (!cachedReference) {
    const reference: ClientReference<any> = registerClientReferenceImpl(
      function () {
        throw new Error(
          // eslint-disable-next-line react-internal/safe-string-coercion
          `Attempted to call ${String(name)}() from the server but ${String(name)} is on the client. ` +
            `It's not possible to invoke a client function from the server, it can ` +
            `only be rendered as a Component or passed to props of a Client Component.`,
        );
      } as any,
      target.$$id + '#' + name,
      target.$$async,
    );
    Object.defineProperty(reference as any, 'name', {value: name});
    cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);
  }
  return cachedReference;
}

const proxyHandlers = {
  get: function (
    target: Function,

View on GitHub (pinned to eafeac097b)

Solutions

1. Pass the function reference as a prop to a client component and invoke it there
2. If the server needs the result, implement the logic in a plain server module or a 'use server' action
3. Re-check which side of the boundary the utility module is meant to run on

Example fix

// before (server component)
import {validate} from './form-client';
const ok = validate(input); // Error: cannot invoke client fn from server

// after (server component)
import {validate} from './validation'; // plain server module
const ok = validate(input);
// or pass through: <Form validator={validateClient} />

const CLIENT_REFERENCE = Symbol.for('react.client.reference');
function isClientReference(value) {
  return value != null && (typeof value === 'object' || typeof value === 'function') && value.$$typeof === CLIENT_REFERENCE;
}
function assertCallableOnServer(fn) {
  if (isClientReference(fn)) {
    throw new Error('Pass this function to a client component; do not call it on the server');
  }
  return fn;
}

When it happens

Trigger: `ClientModule.handler(args)` — directly or via `await ClientModule.handler()` — inside a server component or any server-side module.

Common situations: Calling a client-side helper from RSC; sharing validation/format functions across the boundary; invoking a callback instead of passing it to a client component.

Related errors

• Cannot await or return from a thenable. You cannot await a c
• Cannot access ${expression} on the server. You cannot dot in
• Cannot assign to a client module from a server module.
• 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/b1b0e648d5fa61f4. Report an issue: GitHub.