next · Build et types
Le message
You're importing a component that needs useState. This React hook only works in a client component.
Ce que cela veut dire
Dans l'App Router, chaque composant est un composant serveur par défaut, et un composant serveur a importé un fichier qui utilise un hook n'ayant de sens que dans un navigateur, comme useState. La directive est une seule ligne 'use client' tout en haut du fichier ; l'ajouter entraîne ce fichier et tout ce qu'il importe dans le paquet client — d'où l'intérêt de marquer le plus petit morceau qui a besoin d'état plutôt que la page entière. Dans l'autre sens, découper pour qu'un composant client reçoive des composants serveur comme enfants garde la récupération des données sur le serveur. Next.js 13 formulait la même situation en "It only works in a Client Component but none of its parents are marked with \"use client\"".
Le correctif
Pas de commande en une ligne ici. L’explication dit où regarder.
- Émis par
- next
- Build et types
- 10
Les erreurs de build sont un outil qui refuse avant toute exécution : elles ne cassent rien à l'instant où elles surgissent, mais elles posent deux questions — corrigerez-vous le type ou le chemin pour coller à la forme réelle, ou ferez-vous passer cette seule ligne avec un as any ou un commentaire de suppression ? Et c'est ici que se révèlent pour la première fois les choses qui ne sont vraies que sur votre machine : la casse, les extensions et les variables d'environnement.
Lire un message d’erreur
- Lisez à partir de la première ligne. Plus on descend, plus il s’agit des entrailles de l’outil ; la cause est généralement en haut.
- S’il y a un fichier et un numéro de ligne, commencez là — pas la première image de la pile, mais la ligne la plus haute qui nomme un fichier de vous.
- Cherchez le message tel quel, mais retirez d’abord vos chemins et vos noms de variables : c’est cela qui empêche la correspondance.
- La même situation se formule autrement selon la version de l’outil. Si les résultats sonnent faux, ajoutez le numéro de version.
- Avant de coller un correctif, vérifiez ce qu’il jette. Certains sont irréversibles.
Questions fréquentes
Q. Que veut dire « You're importing a component that needs useState. This React hook only works in a client component. » ?
Dans l'App Router, chaque composant est un composant serveur par défaut, et un composant serveur a importé un fichier qui utilise un hook n'ayant de sens que dans un navigateur, comme useState. La directive est une seule ligne 'use client' tout en haut du fichier ; l'ajouter entraîne ce fichier et tout ce qu'il importe dans le paquet client — d'où l'intérêt de marquer le plus petit morceau qui a besoin d'état plutôt que la page entière. Dans l'autre sens, découper pour qu'un composant client reçoive des composants serveur comme enfants garde la récupération des données sur le serveur. Next.js 13 formulait la même situation en "It only works in a Client Component but none of its parents are marked with \"use client\"".
Q. Comment le corriger ?
Pas de commande en une ligne. L’explication ci-dessus dit où regarder.
Q. Quel outil émet cela ?
next. Cela relève de Build et types, et le message compte 16 mots.