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 a 'use client' module is loaded on the server through the webpack node loader, its default export is rewritten to registerClientReference(function(){ throw ... }). The embedded throw is the runtime half of the client-reference boundary: a client export can be rendered as a component or passed as a prop, but if server code tries to CALL the default export, this error fires.

Source

Thrown at packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.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. Move the callable logic into a shared module with no directive, importable by both sides
2. Keep 'use client' files exporting only components; pass functions as props rather than invoking them
3. If the function must run on the server, put it in a 'use server' file instead

Example fix

// before: utils marked 'use client' but called from a Server Component
// client-utils.js: 'use client'; export default function format(d){...}
import format from './client-utils';
export default async function Page(){ return <p>{format(date)}</p>; }

// after: shared module without a directive
// format.js: export function format(d){...}
import {format} from './format';
export default async function Page(){ return <p>{format(date)}</p>; }

const CLIENT_REFERENCE = Symbol.for('react.client.reference');
function isClientReference(value) {
  return value != null && value.$$typeof === CLIENT_REFERENCE;
}
// server-side usage: render or pass, never call
if (isClientReference(fn)) return <Comp fn={fn} />;
return fn();

try { fn(args); } catch (e) {
  if (/Attempted to call the default export of .* but it's on the client/.test(e.message)) {
    throw new Error('Called a client default export from the server — move the logic to a shared or \'use server\' module: ' + url);
  }
  throw e;
}

When it happens

Trigger: Server-side code invokes the default export of a file marked 'use client' — e.g. const init = await import('./client-utils'); init(myArg) — instead of rendering <DefaultExport /> or forwarding it.

Common situations: Shared-looking utility modules that got 'use client' added (because they use hooks/state) and are still called from Server Components | Calling a client-side formatter/validator function from the server | Refactors where a component default export is also used as a plain function

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 the default export of ${moduleId} from the

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