# 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"

**Code:** `createContext only works in Client Components` · **Category:** Next.js · **Seen on:** Next.js, React

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

## 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?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/nextjs/createcontext-only-works-in-client-components)