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

In the turbopack RSC runtime, client module exports become deep Proxies on the server. The get trap intercepts 'then' because if a thenable escaped, React would treat the client reference as a promise and try to await it server-side; client code cannot execute on the server, so awaiting or returning a client module from a server component throws.

Source

Thrown at packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.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 the awaiting on the server with plain server modules and pass the results as props
2. If the awaited value must come from client code, move the await into a client component or effect
3. Audit 'use client' boundaries: async data helpers used by server components must live in server modules

Example fix

// before (server component)
import {getUser} from './user-client'; // 'use client'
export default async function Page() {
  const user = await getUser(); // Error: cannot await a client module
}

// after
import {getUser} from './user-server'; // plain server module
export default async function Page() {
  const user = await getUser();
  return <UserCard user={user} />;
}

const CLIENT_REFERENCE = Symbol.for('react.client.reference');
function isClientReference(value) {
  return (
    (typeof value === 'object' || typeof value === 'function') &&
    value !== null &&
    value.$$typeof === CLIENT_REFERENCE
  );
}
// server component:
if (isClientReference(mod)) {
  throw new Error('Pass this reference through; do not await it');
}

When it happens

Trigger: `await clientModule.someExport` inside a server component, returning the reference from an async server component, or routing it through Promise.resolve()/a .then() chain in server code.

Common situations: Importing a helper from a 'use client' file and awaiting it in RSC; shared isomorphic modules that await their imports; utility modules accidentally marked 'use client'.

Related errors

• Cannot access ${expression} on the server. You cannot dot in
• Cannot assign to a client module from a server module.
• Attempted to call ${String(name)}() from the server but ${St
• Attempted to call the default export of ${url} from the serv
• Attempted to call ${name}() from the server but ${name} is o

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