recherche

Maison  >  Questions et réponses  >  le corps du texte

Ajoutez la directive "use client" en haut du fichier, TypeError : createContext ne fonctionne que pour les composants clients

J'ai créé une toute nouvelle application Next.js qui utilise le dossier app. Ensuite, j'ai installé Material UI et commencé à utiliser les exemples donnés dans la documentation. Mais j'obtiens cette erreur :

Erreur de type : createContext ne fonctionne que sur les composants clients. Ajoutez une directive "use client" en haut du fichier pour l'utiliser.

Voici un exemple de documentation dans mon code : 

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

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

Je souhaite que ce bouton apparaisse sur ma page. Je sais que l'ajout de "use client" en haut corrigera l'erreur, mais je veux que ma page s'affiche sur le serveur.

P粉811349112P粉811349112399 Il y a quelques jours900

répondre à tous(2)je répondrai

  • P粉642436282

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

    Pour que MUI fonctionne parfaitement avec SSR, vous devez effectuer quelques ajustements : https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts.

    Remarque : même si vous le configurez correctement, le bouton peut être rendu côté serveur, mais vous ne pouvez pas attribuer le gestionnaire onClick (si je me souviens bien)

    répondre
    0
  • P粉502608799

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

    Apparemment, le bouton que vous importez utilise un hook client, dans ce cas createContext。为此，您需要在文件顶部添加“use client”. Mais cela signifie que la page devient un composant client et ne cesse d'être un composant serveur.

    Si cela vous dérange, vous pouvez ajouter le fichier app 同一级别创建一个 libmui.js dans le même dossier que < /code> comme ceci : 

    // lib/mui.js

"use client";

export * from "@mui/material";

    Ensuite, vous l'importez à partir de là (de cette façon, le reste de la page est toujours un composant serveur) : 

    // app/page.js

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

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

    Remarque, vous pouvez rencontrer une erreur similaire lors de la configuration du contexte. Cela signifie que vous essayez de le définir dans le composant serveur. La ligne directrice consiste à ajouter ceci à son propre fichier de balises « Utiliser le client » : 

    // 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>
  );
}

    et importez-le à partir de là : 

    // app/layout.js

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

    Pour une réponse plus détaillée, consultez ce thread.

    répondre
    0
  • Annulerrépondre