{"record":{"id":"fd9748b24e4584fa","repo":"facebook/react","slug":"cannot-await-or-return-from-a-thenable-you-cannot-fd9748","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-webpack/src/ReactFlightWebpackReferences.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-webpack/src/ReactFlightWebpackReferences.js#L172-L208","documentation":"In React Server Components, each named export of a 'use client' module is wrapped on the server by deepProxyHandlers, an opaque Proxy. Reading the '.then' property of that proxy — which is exactly what await, return-from-async, Promise.resolve(), or use() do to detect thenables — throws, because resolving the thenable would require the real client-side value, which never loads on the server. Client references may only be rendered as components or forwarded as props.","triggerScenarios":"Awaiting a named export of a client module in a server component: const {Chart} = await import('./charts'), await Chart, or Chart.then(...). Passing the export to Promise.resolve(Chart), use(Chart), or any 'value-or-promise' helper that probes typeof value.then === 'function'. Returning the client export from an async server component.","commonSituations":"Client-style lazy loading (dynamic import + await) copied into a server component; SSR-disabled patterns such as next/dynamic with ssr:false attempted inside RSC; generic resolvers that accept either a value or a promise receiving a client reference; React 19 use() given a client module export.","solutions":["Replace the dynamic import with a static import and pass the named export through: import {Chart} from './charts', then render <Chart/> or send it as a prop","If the awaited logic must run on the server, move it into a module without the 'use client' directive","If the module must load only in the browser, move the dynamic import inside a 'use client' component (e.g. next/dynamic with ssr:false there)","For helpers that await unknown values, branch on client references first and forward them instead of awaiting"],"exampleFix":"// before (server component)\nconst { Chart } = await import('./charts'); // reads .then on client proxy -> throws\n\n// after (server component)\nimport { Chart } from './charts'; // 'use client' module, used by reference only\nexport default function Page() {\n  return <Chart data={...} />;\n}","handlingStrategy":"type-guard","validationCode":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\n\n// Run before awaiting any unknown value in server code:\nif (isClientReference(value)) {\n  // Never await it — render it or pass it through as a prop.\n  return <Child mod={value} />;\n}\nconst resolved = await value;","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  result = await maybeClientRef;\n} catch (e) {\n  if (String(e.message).includes('Cannot await or return from a thenable')) {\n    // Forward the reference instead of resolving it.\n    return <ClientComponent mod={maybeClientRef} />;\n  }\n  throw e;\n}","preventionTips":["Never dynamic-import or await 'use client' modules inside server components — use static imports and pass exports through","Treat client exports as opaque handles: render or forward, never await, call, or inspect them","Keep data fetching in server components; keep browser-only lazy loading inside client components"],"tags":["react-server-components","use-client","client-reference","await","dynamic-import"],"backgroundTag":"rsc-client-reference-violation","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}