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

The module-namespace proxy for a 'use client' module answers `__esModule` checks with true, pretending to be an ESM-compat module so interop code takes the `.default` path. It then lazily registers a default export whose function body throws: the default export belongs to the client, so calling it from the server is the standard client-function-on-server violation, just reached through CJS interop (`m.default()` after an `__esModule` check).

Source

Thrown at packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.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. Import the default export directly (`import Widget from './widget.client'`) and render it, rather than going through namespace/interop access.
2. Keep CJS interop code away from client modules: import client boundaries only from ESM server components.
3. If a helper must branch, treat a client reference like the component itself — pass it through, never call it.

Example fix

// before (server, transpiled interop)
import * as m from './widget.client';
const Widget = m.__esModule ? m.default : m;
Widget();

// after
import Widget from './widget.client';
// render, don't call: <Widget />

// Interop helper that refuses to invoke client references
function unwrapDefault(ns) {
  const d = ns.__esModule ? ns.default : ns;
  if (d != null && d.$$typeof === Symbol.for('react.client.reference')) {
    return d; // pass through - do NOT call
  }
  return d;
}

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

When it happens

Trigger: Server code does an interop check on a namespace import of a client module and then invokes the result: `import * as m from './widget.client'; if (m.__esModule) { m.default(...); }` — or transpiled CJS `require` interop that does the same.

Common situations: Server components compiled to CJS or run through interop helpers (TS `esModuleInterop`, Babel `_interopRequireDefault`) that touch `.default` of a client module; generic factories that branch on __esModule before calling default; loading client modules via require() in server scripts.

Related errors

• 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
• Cannot access ${expression} on the server. You cannot dot in
• Cannot assign to a client module from a server module.

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