{"record":{"id":"e643e743ae404f45","repo":"facebook/react","slug":"cannot-access-expression-on-the-server-you-can-e643e7","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-webpack/src/ReactFlightWebpackReferences.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-webpack/src/ReactFlightWebpackReferences.js#L179-L215","documentation":"Named exports of a 'use client' module are server-side Proxies (deepProxyHandlers) that expose only a whitelist: Flight metadata ($$typeof/$$id/$$async/name), displayName/defaultProps/_debugInfo/toJSON returning undefined, Symbol.toPrimitive/Symbol.toStringTag, and Context.Provider. Reading any other property throws with the exact 'Name.prop' expression, because the property's value would only exist in the browser where the module actually runs.","triggerScenarios":"Dotting into a client export instead of importing the deeper name: Charts.Chart.COLORS, Icon.paths, Button.metadata. HOC, prop-type, or statics-reading machinery touching non-whitelisted properties of a client component reference. Debug tooling or console expansion that evaluates getters on the proxy.","commonSituations":"Component libraries re-exported through 'use client' barrels whose config objects or sub-objects are read by wrapper code; namespace-style access (import * as X then X.export.prop); devtools inspection of client references during SSR debugging.","solutions":["Import the deeper name directly: import {Chart} from './charts' instead of import * as Charts plus Charts.Chart.COLORS","Expose what you need as additional named exports of the client module and import those","Move shared constants/objects out of the 'use client' file into a directive-free shared module","Do not pass client references to HOC or statics-reading utilities on the server"],"exampleFix":"// before (server component)\nimport * as Charts from './charts'; // 'use client'\nconst COLORS = Charts.Chart.COLORS; // dots into a client export -> throws\n\n// after\n// colors.js (no 'use client'): export const COLORS = [...]\nimport {COLORS} from './colors';\nimport {Chart} from './charts';","handlingStrategy":"type-guard","validationCode":"function safeRead(obj, key) {\n  if (isClientReference(obj)) {\n    // Only metadata and component usage are allowed; do not dot into it.\n    return undefined;\n  }\n  return obj[key];\n}","typeGuard":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\n\nfunction isClientReference(value) {\n  return (\n    value !== null &&\n    (typeof value === 'object' || typeof value === 'function') &&\n    value.$$typeof === CLIENT_REFERENCE_TAG\n  );\n}","tryCatchPattern":"try {\n  value = clientExport.prop;\n} catch (e) {\n  if (String(e.message).includes('on the server') && String(e.message).includes('Cannot access')) {\n    value = undefined; // pass the reference through instead of reading into it\n  } else {\n    throw e;\n  }\n}","preventionTips":["Import the exact named export you need instead of dotting into namespaces of client modules","Keep constants and config objects in directive-free shared modules","Do not pass client references to HOCs or utilities that read arbitrary statics on the server"],"tags":["react-server-components","use-client","client-reference","proxy","property-access"],"backgroundTag":"rsc-client-reference-violation","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}