facebook/react · error · Error

Attempted to call the default export of ${url} from the serv

Error message

Attempted to call the default export of ${url} from the server but it's 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

When the RSC ESM server loader rewrites a client-reference module, it replaces the default export with registerClientReference(function () { throw ... }). The generated guard fires when server code attempts to call the default export of a module that lives on the client: client code can only run in the browser, so on the server it may only be rendered as a component or passed as a prop to another client component.

Source

Thrown at packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js:595

  const body = program.body;

  const names: Array<string> = [];

  await parseExportNamesInto(body, names, url, loader);

  if (names.length === 0) {
    return '';
  }

  let newSrc =
    'import {registerClientReference} from "react-server-dom-esm/server";\n';
  for (let i = 0; i < names.length; i++) {
    const name = names[i];
    if (name === 'default') {
      newSrc += 'export default ';
      newSrc += 'registerClientReference(function() {';
      newSrc +=
        'throw new Error(' +
        JSON.stringify(
          `Attempted to call the default export of ${url} from the server ` +
            `but it's 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.`,
        ) +
        ');';
    } else {
      newSrc += 'export const ' + name + ' = ';
      newSrc += 'registerClientReference(function() {';
      newSrc +=
        'throw new Error(' +
        JSON.stringify(
          `Attempted to call ${name}() from the server but ${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.`,
        ) +
        ');';

View on GitHub (pinned to eafeac097b)

Solutions

1. Don't call it: render it as a component (<Comp />) or pass it as a prop to a client component
2. Move the shared function into a neutral module (no 'use client' directive) that both server and client import
3. If the call really is a server-side operation, mark the module 'use server' instead of 'use client'

Example fix

// before (ServerComponent.jsx)
import format from './format.js'; // './format.js' has 'use client'
const text = format(row); // throws

// after
import Format from './Format.js'; // client component
return <Format data={row} />; // render or pass as prop

const isClientReference = (v: any) =>
  v != null && v.$$typeof === Symbol.for('react.client.reference');
// before calling an imported function on the server:
if (isClientReference(fn)) {
  throw new Error('fn is a client reference; render it or pass it as a prop');
}

function isClientReference(value: unknown): boolean {
  return (
    typeof value === 'object' &&
    value !== null &&
    (value as any).$$typeof === Symbol.for('react.client.reference')
  );
}

try {
  result = fn(input);
} catch (e) {
  if (e instanceof Error && /Attempted to call the default export of .+ from the server/.test(e.message)) {
    // restructure: render the export as a component or move it to a shared module
  } else throw e;
}

When it happens

Trigger: In server code: `import submit from './actions.js'` where './actions.js' is in a 'use client' scope, then invoking submit(...) — e.g. calling a client-side handler, formatter, or validator directly during RSC render or from a server module.

Common situations: Shared utility modules marked 'use client' whose default export gets invoked during server rendering; porting client-router or browser-API code into a server component; a helper accidentally placed inside a client boundary file.

Related errors

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

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