{"record":{"id":"862b2464c50a93be","repo":"facebook/react","slug":"cannot-await-or-return-from-a-thenable-you-cannot-862b24","errorCode":null,"errorMessage":"Cannot await or return from a thenable. You cannot await a client module from a server component.","messagePattern":"Cannot await or return from a thenable\\. You cannot await a client module from a server component\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js","lineNumber":190,"sourceCode":"      // React looks for debugInfo on thenables.\n      case '_debugInfo':\n        return undefined;\n      // Avoid this attempting to be serialized.\n      case 'toJSON':\n        return undefined;\n      case Symbol.toPrimitive:\n        // $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 {","sourceCodeStart":172,"sourceCodeEnd":208,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js#L172-L208","documentation":"Each named export of a 'use client' module imported on the server is a Proxy (deepProxyHandlers) around a client reference. Reading '.then' is interpreted as an attempt to await the value (or to treat it as a thenable). Since client values only exist in the browser, awaiting one from a server component cannot work, so the proxy throws instead of pretending to be a Promise.","triggerScenarios":"In a server component: `const x = await someExport;` where someExport comes from a 'use client' module, or feature-testing `typeof someExport.then === 'function'`, or returning the export where React expects a thenable.","commonSituations":"Awaiting an export of a client module (e.g. `await clientModule.data`) instead of rendering a component that fetches on the client; generic utilities that check `.then` on arbitrary values; passing client exports through promise-combinator helpers on the server.","solutions":["Do not await client exports; render a client component and let it access the value in the browser.","If the awaited value is actually server data, move that code into a module without 'use client' so it runs on the server.","Guard generic helpers so they skip thenable checks for client references (check ●$$typeof before touching .then)."],"exampleFix":"// before (server component)\nimport { loadSettings } from './settings.client';\nconst settings = await loadSettings;\n\n// after: settings loading lives on the server side without 'use client'\nimport { loadSettings } from './lib/settings';\nconst settings = await loadSettings();","handlingStrategy":"type-guard","validationCode":"// Never await a value that might be a client export\nif (isClientReference(value)) {\n  throw new Error('Cannot await a client module export on the server');\n}\nconst result = await value;","typeGuard":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\nexport function isClientReference(value) {\n  return value !== null && typeof value === 'object'\n    ? value.$$typeof === CLIENT_REFERENCE_TAG\n    : typeof value === 'function' && value.$$typeof === CLIENT_REFERENCE_TAG;\n}","tryCatchPattern":null,"preventionTips":["Await only promises created in server modules; pass client exports through untouched.","In generic helpers, check isClientReference() before touching .then.","Keep data-loading code out of 'use client' files."],"tags":["rsc","react-server-components","client-boundary","thenable","await","proxy","unbundled"],"backgroundTag":"rsc-client-module-awaited-on-server","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}