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 client module is registered as a client reference whose call body throws (getReference in ReactFlightWebpackReferences.js). Importing, rendering, or forwarding the export is fine; invoking it from the server is impossible because the function code only exists in the browser.

Source

Thrown at packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.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. Move the pure function into a directive-free module both sides can import
2. If it needs browser APIs, keep it client-side and pass it as a prop for a client component to invoke
3. Use the package's server entry point (e.g. 'some-lib/server') if one exists
4. If the call was accidental, replace it with rendering the component or forwarding the reference

Example fix

// before
// validators.client.js: 'use client'; export function validateEmail(v) {...}
import {validateEmail} from './validators.client';
const ok = validateEmail(email); // calls client export -> throws

// after
// validators.js (no directive)
import {validateEmail} from './validators';
const ok = validateEmail(email);

function invoke(fn, ...args) {
  if (isClientReference(fn)) {
    throw new Error('Client reference invoked on server — forward it to a client component instead');
  }
  return fn(...args);
}

const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');

function isClientReference(value) {
  return (
    value !== null &&
    (typeof value === 'object' || typeof value === 'function') &&
    value.$$typeof === CLIENT_REFERENCE_TAG
  );
}

try {
  result = helper(input);
} catch (e) {
  if (String(e.message).includes('is on the client')) {
    return <ClientComponent helper={helper} input={input} />; // let the client call it
  }
  throw e;
}

When it happens

Trigger: import {helper} from './client' followed by helper() in server code. Passing the export to code that invokes it eagerly: rows.map(clientFn), validators(email), parsers(input, clientCallback).

Common situations: Utility functions trapped inside files that grew a 'use client' directive; component libraries marking entire packages 'use client' so every helper becomes a client reference; calling client-side formatters/validators during RSC render.

Related errors

• Attempted to call ${String(name)}() from the server but ${St
• 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

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