facebook/react · error · Error

503

503

Error message

Cannot use() an already resolved Client Reference.

What it means

use() accepts thenables and (server) contexts. If it receives a client reference that is not a context but already carries a resolved .value, there is nothing left to unwrap, so React throws. It usually means the already-initialized export of a 'use client' module was passed to use() directly.

Source

Thrown at packages/react-server/src/ReactFlightHooks.js:162

      if (thenableState === null) {
        thenableState = createThenableState();
      }
      return trackUsedThenable(thenableState, thenable, index);
    } else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
      unsupportedContext();
    }
  }

  if (isClientReference(usable)) {
    const clientReference: any = usable;
    if (
      clientReference.value != null &&
      clientReference.value.$$typeof === REACT_CONTEXT_TYPE
    ) {
      // Show a more specific message since it's a common mistake.
      throw new Error('Cannot read a Client Context from a Server Component.');
    } else {
      throw new Error('Cannot use() an already resolved Client Reference.');
    }
  } else {
    throw new Error(
      // eslint-disable-next-line react-internal/safe-string-coercion
      'An unsupported type was passed to use(): ' + String(usable),
    );
  }
}

View on GitHub (pinned to eafeac097b)

Solutions

1. Do not call use() on components or objects from client modules; render or invoke them directly.
2. Verify what you passed: use() only unwraps thenables, server contexts, or client references that resolve to contexts.
3. Narrow the value first (check typeof x.then === 'function') before calling use().

Example fix

// before
import {Button} from './ui'; // 'use client' module
const Btn = use(Button); // throws: already resolved client reference

// after
import {Button} from './ui';
return <Button />; // client exports are used directly

function isThenable<T>(x: unknown): x is PromiseLike<T> {
  return !!x && typeof (x as PromiseLike<T>).then === 'function';
}
// only call use() when isThenable(x) is true; otherwise use x directly

When it happens

Trigger: Calling use(clientRef) where clientRef is a function/class/object from a 'use client' file that has already been initialized, e.g. use(SomeButton) instead of rendering SomeButton.

Common situations: Generic wrapper code that calls use(x) on arbitrary values to 'support anything awaitable'; passing a client component or hook object into use() by mistake; test code probing use() semantics.

Related errors

• An unknown Component is an async Client Component. Only Serv
• 524
• An unsupported type was passed to use(): ${String(usable)}
• A rejected Promise was passed to React without a `reason` pr
• 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/635573e3cc84d507. Report an issue: GitHub.