facebook/react · error · Error

Cannot await or return from a thenable. You cannot await a c

Error message

Cannot await or return from a thenable. You cannot await a client module from a server component.

What it means

Each named export of a 'use client' module imported on the server is a Proxy (deepProxyHandlers) around a client reference. Reading '.then' is interpreted as an attempt to await the value (or to treat it as a thenable). Since client values only exist in the browser, awaiting one from a server component cannot work, so the proxy throws instead of pretending to be a Promise.

Source

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

      // 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 'Provider':
        // Context.Provider === Context in React, so return the same reference.
        // This allows server components to render <ClientContext.Provider>
        // which will be serialized and executed on the client.
        return receiver;
      case 'then':
        throw new Error(
          `Cannot await or return from a thenable. ` +
            `You cannot await a client module from a server component.`,
        );
    }
    // eslint-disable-next-line react-internal/safe-string-coercion
    const expression = String(target.name) + '.' + String(name);
    throw new Error(
      `Cannot access ${expression} on the server. ` +
        'You cannot dot into a client module from a server component. ' +
        'You can only pass the imported name through.',
    );
  },
  set: function () {
    throw new Error('Cannot assign to a client module from a server module.');
  },
};

function getReference(target: Function, name: string | symbol): $FlowFixMe {

View on GitHub (pinned to eafeac097b)

Solutions

1. Do not await client exports; render a client component and let it access the value in the browser.
2. If the awaited value is actually server data, move that code into a module without 'use client' so it runs on the server.
3. Guard generic helpers so they skip thenable checks for client references (check ●$$typeof before touching .then).

Example fix

// before (server component)
import { loadSettings } from './settings.client';
const settings = await loadSettings;

// after: settings loading lives on the server side without 'use client'
import { loadSettings } from './lib/settings';
const settings = await loadSettings();

// Never await a value that might be a client export
if (isClientReference(value)) {
  throw new Error('Cannot await a client module export on the server');
}
const result = await value;

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

When it happens

Trigger: In a server component: `const x = await someExport;` where someExport comes from a 'use client' module, or feature-testing `typeof someExport.then === 'function'`, or returning the export where React expects a thenable.

Common situations: Awaiting an export of a client module (e.g. `await clientModule.data`) instead of rendering a component that fetches on the client; generic utilities that check `.then` on arbitrary values; passing client exports through promise-combinator helpers on the server.

Related errors

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

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