{"record":{"id":"49014649e381f39d","repo":"facebook/react","slug":"502","errorCode":"502","errorMessage":"Cannot read a Client Context from a Server Component.","messagePattern":"Cannot read a Client Context from a Server Component\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server/src/ReactFlightHooks.js","lineNumber":117,"sourceCode":"  },\n  useCacheRefresh(): <T>(?() => T, ?T) => void {\n    return unsupportedRefresh;\n  },\n  useEffectEvent: unsupportedHook as any,\n};\n\nfunction unsupportedHook(): void {\n  throw new Error('This Hook is not supported in Server Components.');\n}\n\nfunction unsupportedRefresh(): void {\n  throw new Error(\n    'Refreshing the cache is not supported in Server Components.',\n  );\n}\n\nfunction unsupportedContext(): void {\n  throw new Error('Cannot read a Client Context from a Server Component.');\n}\n\nfunction useId(): string {\n  if (currentRequest === null) {\n    throw new Error('useId can only be used while React is rendering');\n  }\n  const id = currentRequest.identifierCount++;\n  // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client\n  return '_' + currentRequest.identifierPrefix + 'S_' + id.toString(32) + '_';\n}\n\nfunction use<T>(usable: Usable<T>): T {\n  if (\n    // $FlowFixMe[invalid-compare]\n    (usable !== null && typeof usable === 'object') ||\n    typeof usable === 'function'\n  ) {\n    // $FlowFixMe[method-unbinding]","sourceCodeStart":99,"sourceCodeEnd":135,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFlightHooks.js#L99-L135","documentation":"The Flight server runtime installs a hooks dispatcher for Server Components in which useContext/readContext always throw. A Context created inside a 'use client' module only exists in the browser, so React refuses to read it while rendering on the server. Seeing this error means a Server Component (or shared code rendered on the server) tried to read a client-created context.","triggerScenarios":"Calling useContext(C) or use(C) inside a Server Component where C is imported from a module marked 'use client' (or was otherwise created on the client). Also hit when a shared library component that calls useContext internally is rendered inside an RSC tree.","commonSituations":"Migrating pages to Server Components while a deep child still reads a theme/i18n/auth context from a client provider; component library components that call useContext being rendered from server code; passing a context object from a client module across the boundary.","solutions":["Add 'use client' at the top of the file that consumes the context and render that component from the server component.","If the server only needs the underlying value, pass it as a prop from a client parent or read it from server-side sources (cookies, headers, database) instead.","Keep providers and consumers of client contexts both inside client components; server components receive data via props.","If the context must be readable during server render, create it in a server-only module and consume it only from server components."],"exampleFix":"// before (server component layout.tsx)\nimport {ThemeContext} from './ThemeProvider'; // 'use client' module\nexport default function Layout({children}) {\n  const theme = useContext(ThemeContext); // throws\n  return <div data-theme={theme}>{children}</div>;\n}\n\n// after (ThemeToggle.tsx)\n'use client';\nimport {useContext} from 'react';\nimport {ThemeContext} from './ThemeProvider';\nexport function ThemeToggle() {\n  const theme = useContext(ThemeContext); // ok: renders on the client\n  return <button>{theme}</button>;\n}","handlingStrategy":"validation","validationCode":"// CI guard: fail when useContext appears in files without 'use client'\n// scripts/check-client-context.js\nconst {execSync} = require('child_process');\nlet failed = false;\nconst files = execSync(\"grep -rl 'useContext(' app --include='*.tsx'\", {encoding: 'utf8'}).trim().split('\\n').filter(Boolean);\nfor (const f of files) {\n  const head = execSync(`head -1 ${f}`, {encoding: 'utf8'});\n  if (!head.includes(\"'use client'\")) { console.error('useContext in server file: ' + f); failed = true; }\n}\nif (failed) process.exit(1);","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Mark every file that calls useContext with 'use client' at the top.","Pass server data down as props instead of reading client contexts on the server.","Run a CI check or ESLint rule that flags useContext in files without the 'use client' directive.","Keep theme/i18n/auth providers and their consumers together on the client side."],"tags":["react","server-components","rsc","usecontext","use-client","context"],"backgroundTag":"client-context-in-server-component","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}