facebook/react · error · Error

Cannot read Symbol exports. Only named exports are supported

Error message

Cannot read Symbol exports. Only named exports are supported on a client module imported on the server.

What it means

The module proxy for a client module can only create references for named (string) exports, because the reference id is built as `moduleId + '#' + name` and the client looks exports up by name. Symbol-keyed exports cannot be represented, so reading any symbol property that is not an internal passthrough (like Symbol.toPrimitive or Symbol.toStringTag) throws with this restriction.

Source

Thrown at packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js:291

          function then(resolve, reject: any) {
            // Expose to React.
            return Promise.resolve(resolve(proxy));
          } as any,
          // If this is not used as a Promise but is treated as a reference to a `.then`
          // export then we should treat it as a reference to that name.
          target.$$id + '#then',
          false,
        ));
        return then;
      } else {
        // Since typeof .then === 'function' is a feature test we'd continue recursing
        // indefinitely if we return a function. Instead, we return an object reference
        // if we check further.
        return undefined;
      }
  }
  if (typeof name === 'symbol') {
    throw new Error(
      'Cannot read Symbol exports. Only named exports are supported on a client module ' +
        'imported on the server.',
    );
  }
  let cachedReference = target[name];
  if (!cachedReference) {
    const reference: ClientReference<any> = registerClientReferenceImpl(
      function () {
        throw new Error(
          // eslint-disable-next-line react-internal/safe-string-coercion
          `Attempted to call ${String(name)}() from the server but ${String(
            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.`,
        );
      } as any,
      target.$$id + '#' + name,

View on GitHub (pinned to eafeac097b)

Solutions

  1. Import the specific named exports you need instead of using the namespace object.
  2. Keep iterable/duck-typed modules out of 'use client' files if the server must interact with them.
  3. In generic helpers, skip symbol probing for objects marked as client references ($$typeof check).

Example fix

// before (server component)
import * as icons from './icons.client';
const names = [...icons];

// after: explicit named imports only
import { Star, Heart } from './icons.client';
Defensive patterns

Strategy: type-guard

Validate before calling

// Skip symbol probes on client namespaces
function isClientModuleNamespace(obj) {
  return obj != null && obj.$$typeof === Symbol.for('react.client.reference');
}
if (!isClientModuleNamespace(mod)) {
  for (const k of mod) { /* symbol iteration ok */ }
}

Type guard

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

Prevention

When it happens

Trigger: On the server: accessing a symbol-keyed export of a 'use client' module — `mod[Symbol.iterator]`, spreading a namespace import (`{...mod}`), `for...of` over the namespace, or duck-typing probes like `mod[Symbol.asyncIterator]`.

Common situations: Iterating or spreading namespace imports of client modules in server components; generic libraries that feature-detect via well-known symbols (iterator, hasInstance) on values that turn out to be client module namespaces; logging utilities that symbolically inspect objects.

Related errors


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