{"record":{"id":"0a0966c62c7e3ed6","repo":"facebook/react","slug":"cannot-access-expression-on-the-server-you-can-0a0966","errorCode":null,"errorMessage":"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.","messagePattern":"Cannot access (.+?) on the server\\. You cannot dot into a client module from a server component\\. You can only pass the imported name through\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js","lineNumber":197,"sourceCode":"        // $FlowFixMe[prop-missing]\n        return Object.prototype[Symbol.toPrimitive];\n      case Symbol.toStringTag:\n        // $FlowFixMe[prop-missing]\n        return Object.prototype[Symbol.toStringTag];\n      case 'Provider':\n        // Context.Provider === Context in React, so return the same reference.\n        // This allows server components to render <ClientContext.Provider>\n        // which will be serialized and executed on the client.\n        return receiver;\n      case 'then':\n        throw new Error(\n          `Cannot await or return from a thenable. ` +\n            `You cannot await a client module from a server component.`,\n        );\n    }\n    // eslint-disable-next-line react-internal/safe-string-coercion\n    const expression = String(target.name) + '.' + String(name);\n    throw new Error(\n      `Cannot access ${expression} on the server. ` +\n        'You cannot dot into a client module from a server component. ' +\n        'You can only pass the imported name through.',\n    );\n  },\n  set: function () {\n    throw new Error('Cannot assign to a client module from a server module.');\n  },\n};\n\nfunction getReference(target: Function, name: string | symbol): $FlowFixMe {\n  switch (name) {\n    // These names are read by the Flight runtime if you end up using the exports object.\n    case '$$typeof':\n      return target.$$typeof;\n    case '$$id':\n      return target.$$id;\n    case '$$async':","sourceCodeStart":179,"sourceCodeEnd":215,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js#L179-L215","documentation":"Named exports of a 'use client' module imported on the server are opaque client references wrapped in a Proxy. Reading any non-internal property (other than the handful of passthroughs like $$id, name, Provider) throws: the server cannot see inside a client value, it can only pass the reference through to the client. The error names the exact expression that was dot-accessed.","triggerScenarios":"In server code: `clientExport.someProperty`, e.g. `Button.displayName`, `mod.utils.format`, `ctx.Provider === ...` style checks on anything outside the proxy's whitelist, or spreading/inspecting a client export.","commonSituations":"Reading static properties off a client component (e.g. for registration catalogs or metadata) inside a server component; IDE-driven autocomplete that evaluates property access in server context; devtools or logging helpers that enumerate object properties of client references.","solutions":["Pass the imported name through untouched (as a prop or JSX element) instead of reading properties off it.","Move any metadata that the server genuinely needs into a shared module without 'use client'.","Special-case logging/inspection helpers to skip objects that carry the client reference marker ($$typeof === Symbol.for('react.client.reference'))."],"exampleFix":"// before (server component)\nimport Button from './Button.client';\nconst label = Button.displayName;\n\n// after: metadata lives in a shared server-readable module\nimport { BUTTON_LABEL } from './button.meta';\nconst label = BUTTON_LABEL;","handlingStrategy":"type-guard","validationCode":"// Guard generic property readers\nfunction safeProp(obj, key) {\n  if (isClientReference(obj)) {\n    throw new Error(`Cannot read ${String(key)} of a client reference on the server`);\n  }\n  return obj[key];\n}","typeGuard":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\nexport function isClientReference(value) {\n  return value != null && value.$$typeof === CLIENT_REFERENCE_TAG;\n}","tryCatchPattern":null,"preventionTips":["Pass client imports through; do not introspect them on the server.","Store server-needed metadata in shared directive-free modules.","Make logging/inspection helpers skip client references via the $$typeof check."],"tags":["rsc","react-server-components","client-boundary","property-access","proxy","unbundled"],"backgroundTag":"rsc-client-module-property-access","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}