next · Build und Typen
Die Meldung
You're importing a component that needs useState. This React hook only works in a client component.
Was es bedeutet
Im App Router ist jede Komponente standardmäßig eine Server-Komponente, und eine Server-Komponente hat eine Datei importiert, die einen Hook verwendet, der nur im Browser Sinn hat — etwa useState. Die Direktive ist eine einzelne Zeile 'use client' ganz oben in der Datei; sie zieht diese Datei und alles, was sie importiert, in das Client-Bundle. Daher ist es die günstige Wahl, das kleinste Stück zu markieren, das Zustand braucht, statt der ganzen Seite. Umgekehrt hält eine Aufteilung, in der eine Client-Komponente Server-Komponenten als Kinder erhält, das Datenladen auf dem Server. Next.js 13 formulierte dieselbe Lage als "It only works in a Client Component but none of its parents are marked with \"use client\"".
Die Lösung
Hier hilft kein Einzeiler. Die Erklärung sagt, worauf zu schauen ist.
- Ausgegeben von
- next
- Build und Typen
- 10
Build-Fehler sind ein Werkzeug, das verweigert, bevor irgendetwas läuft — sie zerbrechen im Moment ihres Auftretens nichts, stellen aber zwei Fragen: reparieren Sie Typ oder Pfad passend zur echten Form, oder schieben Sie diese eine Zeile mit einem as any oder einem Unterdrückungskommentar durch? Und genau hier zeigen sich erstmals die Dinge, die nur auf dem eigenen Rechner stimmen: Groß-/Kleinschreibung, Endungen und Umgebungsvariablen.
Eine Fehlermeldung lesen
- Von der ersten Zeile abwärts lesen. Weiter unten geht es um das Innere des Werkzeugs; die Ursache steht meist oben.
- Gibt es Datei und Zeilennummer, dort anfangen — nicht der oberste Stack-Frame, sondern die oberste Zeile, die eine eigene Datei nennt.
- Die Meldung wörtlich suchen, vorher aber eigene Pfade und Variablennamen entfernen; genau die verhindern den Treffer.
- Dieselbe Lage wird je Werkzeugversion anders formuliert. Passen die Treffer nicht, die Versionsnummer mit in die Suche.
- Vor dem Einfügen einer Lösung prüfen, was sie verwirft. Manches davon lässt sich nicht zurückholen.
Häufige Fragen
Q. Was bedeutet „You're importing a component that needs useState. This React hook only works in a client component.“?
Im App Router ist jede Komponente standardmäßig eine Server-Komponente, und eine Server-Komponente hat eine Datei importiert, die einen Hook verwendet, der nur im Browser Sinn hat — etwa useState. Die Direktive ist eine einzelne Zeile 'use client' ganz oben in der Datei; sie zieht diese Datei und alles, was sie importiert, in das Client-Bundle. Daher ist es die günstige Wahl, das kleinste Stück zu markieren, das Zustand braucht, statt der ganzen Seite. Umgekehrt hält eine Aufteilung, in der eine Client-Komponente Server-Komponenten als Kinder erhält, das Datenladen auf dem Server. Next.js 13 formulierte dieselbe Lage als "It only works in a Client Component but none of its parents are marked with \"use client\"".
Q. Wie behebe ich das?
Es gibt keinen Einzeiler. Die Erklärung oben sagt, worauf zu schauen ist.
Q. Welches Werkzeug gibt das aus?
next. Es gehört zu Build und Typen, und die Meldung hat 16 Wörter.