facebook/react · error · Error

514

514

Error message

Cannot access ${String(name)} on the server. You cannot dot into a temporary client reference from a server component. You can only pass the value through to the client.

What it means

On the server, temporary references are Proxy objects that let opaque client-held values (a File from a form, a client-created object) be passed back toward the client untouched. The proxy's get trap permits only a Context Provider identity check and 'then' (so async functions may return the value); reading any other property means the server is trying to use the value, which it cannot, so the trap throws naming the accessed property.

Solutions

1. Do not read or destructure the value on the server — pass it through to a Client Component prop.
2. If file metadata is needed server-side, read the actual File entry from the original FormData instead of the temp ref.
3. Exclude temporary references from logging/serialization; log only their identity or id key.

Example fix

// before — Server Component reads the value
function Files({fileRef}) { return <p>{fileRef.name}</p>; }

// after — the client reads it
function Files({fileRef}) { return <FileMeta fileRef={fileRef} />; }
// FileMeta.tsx
'use client';
export function FileMeta({fileRef}) { return <p>{fileRef.name}</p>; }

// Track which decoded values are temporary references by identity BEFORE touching them.
const tempRefs = new WeakMap<object, string>();
const args = await decodeReply(formData, {temporaryReferences: tempRefs});
const opaque = new Set(args.filter(a => typeof a === 'object' && a !== null && tempRefs.has(a)));

export function isTemporaryReference(v: unknown, store: WeakMap<object, string>): boolean {
  return typeof v === 'object' && v !== null && store.has(v); // WeakMap.has performs no property access on the proxy
}

try {
  return fileRef.name;
} catch (e) {
  if (String((e as Error)?.message).startsWith('Cannot access')) {
    return undefined; // treat as opaque, pass through untouched
  }
  throw e;
}

When it happens

Trigger: Inside a Server Component or action: const {file} = args; file.name — any property read or destructuring on a temporary reference; for...in, spread, or logging with util.inspect/console.dir over a temp ref (inspectors read properties).

Common situations: Trying to inspect an uploaded file's name/size server-side after decoding an action reply; logging decoded action arguments wholesale; passing temp refs through feature-detecting utility code.

Related errors

• 515
• 374
• 375
• 376
• 378

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

Appendix: source

Thrown at packages/react-server/src/ReactFlightServerTemporaryReferences.js:80

        // $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':
        // Allow returning a temporary reference from an async function
        // Unlike regular Client References, a Promise would never have been serialized as
        // an opaque Temporary Reference, but instead would have been serialized as a
        // Promise on the server and so doesn't hit this path. So we can assume this wasn't
        // a Promise on the client.
        return undefined;
    }
    throw new Error(
      // eslint-disable-next-line react-internal/safe-string-coercion
      `Cannot access ${String(name)} on the server. ` +
        'You cannot dot into a temporary client reference from a server component. ' +
        'You can only pass the value through to the client.',
    );
  },
  set: function () {
    throw new Error(
      'Cannot assign to a temporary client reference from a server module.',
    );
  },
};

export function createTemporaryReference<T>(
  temporaryReferences: TemporaryReferenceSet,
  id: string,
): TemporaryReference<T> {
  const reference: TemporaryReference<any> = Object.defineProperties(

View on GitHub (pinned to eafeac097b)