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

This is the core client-boundary guard of the unbundled runtime: every named export of a 'use client' module imported on the server is a registered client reference wrapping a function that throws when invoked. The message spells out the only legal uses of a client function from server code — render it as a Component or pass it as a prop to a Client Component.

Source

Thrown at packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.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 = {

View on GitHub (pinned to eafeac097b)

Solutions

1. Move the function into a shared module without 'use client' and import it on both sides.
2. If the call must run in the browser, move it into a client component and pass results as props.
3. If it is a component, render it in JSX instead of calling it.

Example fix

// before (server component)
import { formatMoney } from './money.client';
<span>{formatMoney(total)}</span>

// after: money.js has no 'use client' directive
import { formatMoney } from './lib/money';
<span>{formatMoney(total)}</span>

// Guard every indirect call of imported functions
if (isClientReference(fn)) {
  return <FnComponent {...props} />; // render, don't invoke
}
return fn(props);

const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
export function isClientReference(value) {
  return typeof value === 'function' && value.$$typeof === CLIENT_REFERENCE_TAG;
}

When it happens

Trigger: In a server component: `import { formatMoney } from './format.client'; formatMoney(5)` — any call of a named export of a 'use client' module, including passing it to non-React server code that invokes callbacks.

Common situations: Calling utility functions exported from files that later gained a 'use client' directive (e.g. because they import hooks); passing client functions into server-side helpers that immediately invoke them; re-exporting pure helpers from a client barrel and calling them on the server.

Related errors

• Attempted to call the default export of ${url} from the serv
• Attempted to call ${name}() from the server but ${name} is o
• 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.

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