facebook/react · error · Error

378

378

Error message

Type ${typeof value} is not supported in Client Component props.

What it means

The final fallback of the Client Component prop serializer: the value's typeof matched none of the handled cases (string, number, boolean, plain/known objects, global symbol, bigint). Modern React intercepts all standard types earlier with dedicated errors, so reaching this branch means an exotic value — a spoofed typeof via Proxy/host tricks, or an encoding produced by a mismatched runtime version that this build has no serializer for.

Source

Thrown at packages/react-server/src/ReactFlightServer.js:4335

    request.pendingChunks++;
    const symbolId = request.nextChunkId++;
    emitSymbolChunk(request, symbolId, name);
    writtenSymbols.set(value, symbolId);
    return serializeByValueID(symbolId);
  }

  if (typeof value === 'bigint') {
    if (enableTaint) {
      const tainted = TaintRegistryValues.get(value);
      if (tainted !== undefined) {
        throwTaintViolation(tainted.message);
      }
    }
    return serializeBigInt(value);
  }

  throw new Error(
    `Type ${typeof value} is not supported in Client Component props.` +
      describeObjectForErrorMessage(parent, parentPropertyName),
  );
}

function logRecoverableError(
  request: Request,
  error: mixed,
  task: Task | null, // DEV-only
): string {
  const prevRequest = currentRequest;
  // We clear the request context so that console.logs inside the callback doesn't
  // get forwarded to the client.
  currentRequest = null;
  let errorDigest;
  try {
    const onError = request.onError;
    if (__DEV__ && task !== null) {

View on GitHub (pinned to eafeac097b)

Solutions

1. Convert the value to a supported representation (string or plain object) before passing it.
2. Align react and react-server-dom-* versions so both ends support the same value types.
3. If you own the type, pass an explicit serializable form or revive it client-side from data.

Example fix

// before
<Client value={exoticHostObject} />

// after — pass a supported representation
<Client value={String(exoticHostObject)} /> {/* or a POJO copy */}

// Recursive whitelist walker: fails with the offending path before render does.
export function assertSerializable(v: unknown, path = 'props'): void {
  const t = typeof v;
  if (v === null || t === 'string' || t === 'number' || t === 'boolean') return;
  if (t === 'bigint') { if (v.toString().length > 300) throw new Error(path + ': bigint too large'); return; }
  if (t === 'symbol') { if (!isGlobalSymbol(v)) throw new Error(path + ': non-global symbol'); return; }
  if (t === 'function') throw new Error(path + ': function value');
  if (Array.isArray(v)) return void v.forEach((c, i) => assertSerializable(c, `${path}[${i}]`));
  if (v instanceof Date || v instanceof Map || v instanceof Set || ArrayBuffer.isView(v)) return;
  if (Object.getPrototypeOf(v) !== Object.prototype) throw new Error(path + ': non-plain object');
  for (const [k, c] of Object.entries(v)) assertSerializable(c, `${path}.${k}`);
}

When it happens

Trigger: A value whose typeof is not one of the standard serializable kinds reaching props — e.g. host exotic objects or Proxy-based tricks; running a newer client/runtime pair against an older react-server build that predates a type's serializer.

Common situations: Version skew between the two ends of the RSC boundary; exotic embedding environments (workerd, quickjs) surfacing unusual globals; values smuggled through dynamic props objects.

Related errors

• 379
• 498
• 376
• 526
• 526

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