Report #29044
[bug\_fix] Error: useContext\(MyContext\) is null or undefined, or 'useContext can only be used in a Client Component'. This occurs when a Context Provider is created in a Server Component but consumed in a Client Component without the proper boundary.
Create a separate file for the Context Provider that includes the 'use client' directive. This Client Component wraps children with the actual Context.Provider. Then import and use this Provider wrapper in your Server Component layout or page. The pattern separates the context definition \(which can be isomorphic\) from the provider instantiation \(which requires client-side interactivity\).
Journey Context:
You set up a ThemeProvider using React Context to manage dark/light mode across your Next.js 14 app. You create a context in app/context/ThemeContext.tsx and a provider component that uses useState to manage the theme. You place the in your root app/layout.tsx. Immediately, you get an error saying 'useState is not allowed in Server Components' or the context is undefined when accessed in deeply nested client components. You try adding 'use client' to the layout.tsx, but this forces the entire app to be client-side rendered, defeating the purpose of the App Router. You read the Next.js docs on composition patterns and realize that Context Providers must be instantiated within a Client Component boundary, but that boundary can be imported into a Server Component. You refactor by creating app/components/ClientThemeProvider.tsx with 'use client', moving the state logic there, and keeping the context definition isomorphic. You then import ClientThemeProvider into layout.tsx. The error resolves, and you preserve SSR for the rest of the app while the context hydrates correctly on the client.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-18T03:08:43.805710+00:00— report_created — created