createContext only works in Client Components Next.js Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Next.js: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client"

A context provider (or a lib that uses createContext) is used in a Server Component.

Exact message you may see You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client"createContext only works in Client ComponentsTypeError: createContext is not a function Next.jsReact Context is unavailable in Server Components
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

Context only works in Client Components. Put "use client" at the top of the file that calls createContext/provider, and render that provider component from the server layout, passing server content as children. For third-party providers create a small providers.tsx client wrapper.

Common causes

  • Context/provider defined in a server file
  • Third-party provider (theme, query client) used directly in layout.tsx
  • Missing "use client" in the provider module
  • Library exports hooks needing client
  • Re-export file without directive

⚡ Quick fix

  1. Create app/providers.tsx with "use client" and wrap {children}
  2. Mark the context file "use client"
  3. Keep server components as children props

Detailed fix by platform

Next.js

  1. tsx
    // app/providers.tsx
"use client";
export function Providers({children}:{children:React.ReactNode}) { return <ThemeProvider>{children}</ThemeProvider>; }

How to diagnose

  1. File — Has "use client"?
  2. Provider — In layout directly?
  3. Lib — Needs client wrapper?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

CORS error calling Next.js API route / route handler — Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler) (Next.js)CORS error calling Ne…Functions cannot be passed — Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". (React)Functions cannot be p…needs useState — You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client" (React)needs useStatenext build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…No HTTP methods exported in route.ts — Next.js: Error: No HTTP methods exported in '/app/api/users/route.ts'. Export a named export for each HTTP method (GET, POST...) (Next.js)No HTTP methods expor…No QueryClient set — Error: No QueryClient set, use QueryClientProvider to set one (React)No QueryClient setprocess.env.X is undefined in the browser (NEXT_PUBLIC_) — Next.js: process.env.API_URL is undefined in Client Component / env variable not available in the browser (Next.js)process.env.X is unde…server-only — Next.js: You're importing a component that needs "server-only". That only works in a Server Component (Next.js)server-onlycreateCon…

Explore the map of this error Full error map →

🧠 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.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.