useContext undefined ⚛️ React

TypeError: Cannot destructure property 'user' of 'useContext(...)' as it is undefined.

A component read a context with no matching Provider above it.

Seen on: React

Meaning

useContext returns the default value (often undefined) when there’s no Provider in the tree. Provider placed too low, wrong context instance, or tests without the provider.

Common causes

  • Provider missing or below the consumer
  • Two different context objects (duplicate module)
  • Tests rendering without the provider

⚡ Quick fix

  1. Wrap the tree with the Provider at the right level
  2. Export the context from one module
  3. Create a custom hook that throws a clear error when the context is missing

Detailed fix by platform

React

  1. jsx
    export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within <AuthProvider>');
  return ctx;
}

How to diagnose

  1. Provider — Is it above the component?
  2. Recent change — Did it start after a deploy, upgrade, or configuration change? Compare with the last working version.

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.