facebook/react · error · Error

Attempted to call the default export of ${moduleId} from the

Error message

Attempted to call the default export of ${moduleId} 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 server code (usually bundler CJS/ESM interop) reads '__esModule' on a client module proxy, React pretends the module is an ESM-compat module and registers a 'default' client reference. Importing and forwarding that reference is fine, but invoking it throws: the default export's function body only exists on the client, so it can never execute during server rendering.

Source

Thrown at packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js:241

    // React looks for debugInfo on thenables.
    case '_debugInfo':
      return undefined;
    // Avoid this attempting to be serialized.
    case 'toJSON':
      return undefined;
    case Symbol.toPrimitive:
      // $FlowFixMe[prop-missing]
      return Object.prototype[Symbol.toPrimitive];
    case Symbol.toStringTag:
      // $FlowFixMe[prop-missing]
      return Object.prototype[Symbol.toStringTag];
    case '__esModule':
      // Something is conditionally checking which export to use. We'll pretend to be
      // an ESM compat module but then we'll check again on the client.
      const moduleId = target.$$id;
      target.default = registerClientReferenceImpl(
        function () {
          throw new Error(
            `Attempted to call the default export of ${moduleId} 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.`,
          );
        } as any,
        target.$$id + '#',
        target.$$async,
      );
      return true;
    case 'then':
      if (target.then) {
        // Use a cached value
        return target.then;
      }
      if (!target.$$async) {
        // If this module is expected to return a Promise (such as an AsyncModule) then
        // we should resolve that with a client reference that unwraps the Promise on

View on GitHub (pinned to eafeac097b)

Solutions

1. Move the pure function to a module without the 'use client' directive and import it on the server
2. If it must stay client-side, pass the default reference as a prop to a client component that calls it there
3. Default-export a component from the client file and keep helper functions in a shared directive-free module
4. Check the import path — you may be reaching a client entry point when the package ships a server entry

Example fix

// before
// util.client.js: 'use client'; export default function formatBytes(n) {...}
import formatBytes from './util.client';
const s = formatBytes(2048); // calls client default export -> throws

// after
// util.js (no directive): export function formatBytes(n) {...}
import {formatBytes} from './util';
const s = formatBytes(2048);

function callIfServerSafe(fn, ...args) {
  if (isClientReference(fn)) {
    throw new Error('fn is a client reference — pass it to a client component instead of calling it');
  }
  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 = ClientDefault(args);
} catch (e) {
  if (String(e.message).includes("Attempted to call the default export")) {
    // Render it as a component or forward it to a client component instead.
    return <ClientComponent handler={ClientDefault} />;
  }
  throw e;
}

When it happens

Trigger: import ClientFn from './client' (or mod.default via interop) followed by ClientFn(args) in server code. Default-exported plain functions or helpers inside 'use client' files called from a server component. Interop wrappers that eagerly invoke .default.

Common situations: A 'use client' file whose default export is a helper function instead of a component; barrels re-exporting default functions from client bundles; framework-agnostic packages whose ESM entry is marked 'use client' but exports callable utilities.

Related errors

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

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