facebook/react · error · Error

502

502

Error message

Cannot read a Client Context from a Server Component.

What it means

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.

Source

Thrown at packages/react-server/src/ReactFlightHooks.js:117

  },
  useCacheRefresh(): <T>(?() => T, ?T) => void {
    return unsupportedRefresh;
  },
  useEffectEvent: unsupportedHook as any,
};

function unsupportedHook(): void {
  throw new Error('This Hook is not supported in Server Components.');
}

function unsupportedRefresh(): void {
  throw new Error(
    'Refreshing the cache is not supported in Server Components.',
  );
}

function unsupportedContext(): void {
  throw new Error('Cannot read a Client Context from a Server Component.');
}

function useId(): string {
  if (currentRequest === null) {
    throw new Error('useId can only be used while React is rendering');
  }
  const id = currentRequest.identifierCount++;
  // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client
  return '_' + currentRequest.identifierPrefix + 'S_' + id.toString(32) + '_';
}

function use<T>(usable: Usable<T>): T {
  if (
    // $FlowFixMe[invalid-compare]
    (usable !== null && typeof usable === 'object') ||
    typeof usable === 'function'
  ) {
    // $FlowFixMe[method-unbinding]

View on GitHub (pinned to eafeac097b)

Solutions

1. Add 'use client' at the top of the file that consumes the context and render that component from the server component.
2. 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.
3. Keep providers and consumers of client contexts both inside client components; server components receive data via props.
4. If the context must be readable during server render, create it in a server-only module and consume it only from server components.

Example fix

// before (server component layout.tsx)
import {ThemeContext} from './ThemeProvider'; // 'use client' module
export default function Layout({children}) {
  const theme = useContext(ThemeContext); // throws
  return <div data-theme={theme}>{children}</div>;
}

// after (ThemeToggle.tsx)
'use client';
import {useContext} from 'react';
import {ThemeContext} from './ThemeProvider';
export function ThemeToggle() {
  const theme = useContext(ThemeContext); // ok: renders on the client
  return <button>{theme}</button>;
}

// CI guard: fail when useContext appears in files without 'use client'
// scripts/check-client-context.js
const {execSync} = require('child_process');
let failed = false;
const files = execSync("grep -rl 'useContext(' app --include='*.tsx'", {encoding: 'utf8'}).trim().split('\n').filter(Boolean);
for (const f of files) {
  const head = execSync(`head -1 ${f}`, {encoding: 'utf8'});
  if (!head.includes("'use client'")) { console.error('useContext in server file: ' + f); failed = true; }
}
if (failed) process.exit(1);

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• An unknown Component is an async Client Component. Only Serv
• 373
• Context can only be read while React is rendering. In classe
• Hooks are not supported inside an async component. This erro
• Attempted to call the default export of ${url} from the serv

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/49014649e381f39d. Report an issue: GitHub.