"createContext only works in Client Components." When I'm not using context.

So I recently started attempting to move my Next.js app from using the Pages router to the app router. The project was using Material UI and React Query. I have a single route for '/' and I keep getting the error TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component any time I attempt to introduce a component into my page.tsx Example: If I have a simple empty header in my app everything renders just fine.
import React from "react";

export default function Page() {
return (
<div>
<header>
</header>
</div>
)
}
import React from "react";

export default function Page() {
return (
<div>
<header>
</header>
</div>
)
}
If I move that header to a component, I get the error listed above. page.tsx
import {Header} from "../components";
import React from "react";

export default function Page() {
return (
<div>
<Header />
</div>
)
}
import {Header} from "../components";
import React from "react";

export default function Page() {
return (
<div>
<Header />
</div>
)
}
header.tsx
import React from "react";

export function Header() {

return (
<header>
</header>
)
}
import React from "react";

export function Header() {

return (
<header>
</header>
)
}
Originally I thought this was due to my use of Material UI components like <Typography/> but I'm getting this error with no material objects at all. Additional details layout.tsx
import {Providers} from "../components/temp/providers";
import '../styles/globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {


return (
<html lang="en">
<head></head>
<body>
<div className={'flex flex-col min-h-screen max-w-full justify-between bg-neutral-900'}>
<Providers>
{children}
</Providers>
</div>
</body>
</html>
);
}
import {Providers} from "../components/temp/providers";
import '../styles/globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {


return (
<html lang="en">
<head></head>
<body>
<div className={'flex flex-col min-h-screen max-w-full justify-between bg-neutral-900'}>
<Providers>
{children}
</Providers>
</div>
</body>
</html>
);
}
14 Replies
Kev
Kev13mo ago
I would assume that Providers is almost certainly using a context internally
Slamerz
Slamerz13mo ago
Sorry, yes I followed the instructions in the next.js docs for applying context providers to the app. https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components Providers.tsx
"use client"
import {darkMode} from "../../util/themes";
import {AuthProvider} from "../index";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import ThemeProvider from "@mui/material/styles/ThemeProvider";

const queryClient = new QueryClient();

export const Providers = ({children}: {children: any}) => {

return(<ThemeProvider theme={darkMode}>
<AuthProvider>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</AuthProvider>
</ThemeProvider>)
}
"use client"
import {darkMode} from "../../util/themes";
import {AuthProvider} from "../index";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import ThemeProvider from "@mui/material/styles/ThemeProvider";

const queryClient = new QueryClient();

export const Providers = ({children}: {children: any}) => {

return(<ThemeProvider theme={darkMode}>
<AuthProvider>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</AuthProvider>
</ThemeProvider>)
}
Getting Started: React Essentials
An overview of essential React features for building Next.js Applications, including Server Components.
低级黑小明👑
Yeah that one got me early on. I found out the UI code will run on client side and server side, they run on server side first. Looks like you’re using nextjs 13.4, just use ‘use client’ at wherever you’re using the ui code should fix it, or use dynamic import and set ssr to false
Slamerz
Slamerz13mo ago
So it's just impossible to do any ssr in 13?
Liam
Liam13mo ago
"use client"; does the "old way" per-say of doing the inital render on the server and then hydrating afaik
Slamerz
Slamerz13mo ago
Yeah but I guess my confusion is why is it required in a component with no state fulness
Liam
Liam13mo ago
Your layout uses context as far as I can tell, which is state
Liam
Liam13mo ago
Don't know much about emotion, but looks like it might not fully support RSC https://github.com/emotion-js/emotion/issues/2978
GitHub
Emotion in React Server Components? · Issue #2978 · emotion-js/emot...
The problem I would like to have a Next.js 13 Layout component (eg. RootLayout) that is a Server Component, and have my styling for that layout also stay in Server Components (potentially even in t...
低级黑小明👑
it's possible, it's just that the UI code will only run on the client instead of the server so it's important to know which piece of code is running server and which is running on client.
Slamerz
Slamerz13mo ago
But I'm getting these context errors when I'm not using any material ui components yet
低级黑小明👑
I know it's confusing, the clientside code is imported and run instantly. Just try adding 'use client' to places and see if anything changes, if you haven't tried AI, they can help more than you think to solve these problems.
Slamerz
Slamerz13mo ago
I'm just not grasping how adding any components even if it's just a div means the whole page components has to be made use client Found the issue, it was nothing to do with the provider, or needing to be made "use client" in the particular component I was attempting to import, it was an issue with using barrel pattern, in a directory that had unrelated files which did use context (were being used in the old pages router) So fix was doing direct import paths to the files, no index.js files.
低级黑小明👑
good job. I wouldn't be able to figure this out. very impressive
Slamerz
Slamerz8mo ago
@Naweed https://discord.com/channels/966627436387266600/1111740083050123415/1112037314194063361 The solution to my particular issue as posted in the thread was that I had been using the barrel pattern, and some of the exports from that barrel were client componenets. So I just stopped using the barrel pattern for the project
Want results from more Discord servers?
Add your server
More Posts