Theo's Typesafe Cult•2y ago

"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•2y ago

I would assume that Providers is almost certainly using a context internally

SlamerzOP•2y 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.

低级黑小明👑•2y ago

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

SlamerzOP•2y ago

So it's just impossible to do any ssr in 13?

Liam•2y ago

"use client"; does the "old way" per-say of doing the inital render on the server and then hydrating afaik

SlamerzOP•2y ago

Yeah but I guess my confusion is why is it required in a component with no state fulness

Liam•2y ago

Your layout uses context as far as I can tell, which is state

Liam•2y 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...

低级黑小明👑•2y ago

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.

SlamerzOP•2y ago

But I'm getting these context errors when I'm not using any material ui components yet

低级黑小明👑•2y ago

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.

SlamerzOP•2y 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.

低级黑小明👑•2y ago

good job. I wouldn't be able to figure this out. very impressive

SlamerzOP•13mo 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

Gaming

Programming

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