search

Home  >  Q&A  >  body text

Add the "use client" directive at the top of the file, TypeError: createContext only works for client components

I created a brand new Next.js application that uses the app folder. Then I installed Materiel UI and started using the examples given in the documentation. But I get this error:

Type error: createContext only applies to client components. Add a "use client" directive at the top of the file to use it.

Here is an example of documentation in my code: 

import Button from "@mui/material/Button";

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

I want this button to appear on my page. I know adding "use client" at the top will fix the error, but I want my page to render on the server.

P粉811349112P粉811349112398 days ago897

reply all(2)I'll reply

  • P粉642436282

    P粉6424362822023-10-26 13:18:31

    To make MUI work perfectly with SSR, you need to make some adjustments: https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts.

    Note: Even if you configure it correctly, the button can be rendered server-side, but you cannot assign the onClick handler (if I remember correctly)

    reply
    0
  • P粉502608799

    P粉5026087992023-10-26 00:38:54

    Apparently the button you are importing is using a client hook, in this case createContext. To do this, you need to add "use client" at the top of the file. But this means that the page becomes a client component and does not cease to be a server component.

    If this bothers you, you can create a lib folder at the same level as app and add the mui.js< /code> file in it as follows Show:

    // lib/mui.js

"use client";

export * from "@mui/material";

    Then you import it from there (this way, the rest of the page is still a server component): 

    // app/page.js

import { Button } from "../lib/mui";

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

    Side note, you may encounter a similar error when setting up the context. This means you are trying to set it in the server component. The guideline is to add this to its own "Use Client" tag file: 

    // app/theme-provider.tsx

"use client";

import { createContext } from "react";

export const ThemeContext = createContext("");

export default function ThemeProvider({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

    and import it from there: 

    // app/layout.js

import ThemeProvider from './theme-provider';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

    For a more detailed answer, check out this thread.

    reply
    0
  • Cancelreply