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 unbundled Node loader loads a 'use client' module inside the server, it replaces the default export with a registered client reference whose function body throws. Client code executes only in the browser; if server code calls the default export, the wrapper throws this error explaining the only legal uses: render it as a Component or pass it as a prop to another Client Component.

Source

Thrown at packages/react-server-dom-unbundled/src/ReactFlightUnbundledNodeLoader.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-webpack/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. Render it instead of calling it: use <ClientComponent {...props}/> in JSX.
2. If the function is pure and needed on the server, move it into a shared module WITHOUT the 'use client' directive and import that from both sides.
3. If the call must happen in the browser, move the call into a client component and pass only data/props across the boundary.

Example fix

// before (server component)
import formatDate from './lib/format.client';
export default async function Page() {
  return <span>{formatDate(Date.now())}</span>;
}

// after: shared module without 'use client'
// lib/format.js  (no directive)
export default function formatDate(ts) { /* ... */ }
import formatDate from './lib/format';

// Before calling an imported function on the server
import { isClientReference } from './guards';
if (isClientReference(fn)) {
  throw new Error('fn is a client reference - render it or pass it as a prop');
}

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

When it happens

Trigger: A server component (or any server-module code) imports the default export of a 'use client' module and invokes it as a function: `import Button from './Button.client'; Button()` or `formatDate(now)` where formatDate is the default export of a client module.

Common situations: Utility functions (formatters, date libs) accidentally left in a file with 'use client' and then called from a server component; invoking a client component as a function instead of rendering <Button/>; hooks re-exported from a 'use client' file called on the server.

Related errors

• Attempted to call ${name}() from the server but ${name} is o
• Attempted to call ${String(name)}() from the server but ${St
• The source map has more mappings than there are lines.
• Cannot have both "use client" and "use server" directives in
• Cannot await or return from a thenable. You cannot await a c

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