2. Programming Q&A
  3. reactjs - createContext only works in Client Components. Add the "use client" directive at the top of the file

reactjs - createContext only works in Client Components. Add the "use client" directive at the top of the file

admin2025-04-26  7

Next app router method is being used. Emotion is also being used.

"use client";

import { Global, ThemeProvider } from "@emotion/react";
import globalStyle from "@/app/style/global";

const theme = {
  colors: {
    primary: '#3498db',
    secondary: '#2ecc71',
  },
};

export function Provider({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider theme={theme}>
      <Global styles={globalStyle} />
      {children}
    </ThemeProvider>
  );
}

I created the provider like this

import { Provider } from "@/app/provider";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Provider>
          {children}
        </Provider>
      </body>
    </html>
  );
}

And the layout is structured like this
But this error occurs

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

I know that adding use client to the layout can solve the problem, but I don't want to do that and I don't think it's necessary.

转载请注明原文地址:http://anycun.com/QandA/1745600827a91021.html