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 checks __esModule interop on a client module proxy, the trap registers target.default as a client reference that throws when invoked: the default export's implementation lives on the client and cannot be called from the server; it can only be rendered as a component or forwarded.

Source

Thrown at packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.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. Render the default export as a component (<ClientDefault />) instead of calling it
2. Pass the default reference as a prop to a client component
3. If the server needs callable logic, implement it in a 'use server' function instead

Example fix

// before (server component)
import ClientModule from './chart-client';
const el = ClientModule({data}); // Error: cannot call default export

// after
import ClientChart from './chart-client';
return <ClientChart data={data} />;

const CLIENT_REFERENCE = Symbol.for('react.client.reference');
function isClientReference(value) {
  return value != null && (typeof value === 'object' || typeof value === 'function') && value.$$typeof === CLIENT_REFERENCE;
}
function safeDefault(mod) {
  const def = mod.default;
  if (isClientReference(def) || typeof def === 'function') {
    return def; // renderable/forwardable, but never call it on the server
  }
  return undefined;
}

When it happens

Trigger: CJS-style interop followed by a call: `const mod = require('./client-module'); mod.default(...)`, or any explicit `ClientModule.default(...)` invocation from server code.

Common situations: Server code consuming a client module through CJS transpilation; mixed ESM/CJS codebases triggering __esModule checks; generic wrappers that call .default of dynamic imports.

Related errors

• 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.
• Cannot read Symbol exports. Only named exports are supported
• 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/9b0888d926e0a34f. Report an issue: GitHub.