next · Build e tipos
A mensagem
You're importing a component that needs useState. This React hook only works in a client component.
O que significa
No App Router todo componente é um componente de servidor por padrão, e um componente de servidor importou um arquivo que usa um hook que só faz sentido no navegador, como useState. A diretiva é uma única linha 'use client' no topo do arquivo, e acrescentá-la puxa aquele arquivo e tudo que ele importa para o pacote do cliente — por isso marcar o menor pedaço que precisa de estado, em vez da página inteira, é a escolha barata. No sentido oposto, dividir de forma que um componente de cliente receba componentes de servidor como filhos mantém a busca de dados no servidor. O Next.js 13 escrevia a mesma situação como "It only works in a Client Component but none of its parents are marked with \"use client\"".
A correção
Não há um comando de uma linha. A explicação diz o que verificar.
- Impresso por
- next
- Build e tipos
- 10
Erros de build são uma ferramenta recusando antes de qualquer execução, então não quebram nada no momento em que aparecem — mas fazem duas perguntas: você vai corrigir o tipo ou o caminho para bater com a forma real, ou vai empurrar aquela linha com um as any ou um comentário de supressão? E é aqui que as coisas verdadeiras só na sua máquina — caixa das letras, extensões e variáveis de ambiente — aparecem pela primeira vez.
Como ler uma mensagem de erro
- Leia da primeira linha para baixo. Quanto mais abaixo, mais são as tripas da ferramenta; a causa costuma estar no topo.
- Se há arquivo e número de linha, comece ali — não o quadro superior da pilha, e sim a linha mais alta que nomeie um arquivo seu.
- Pesquise a mensagem literal, mas tire primeiro seus caminhos e nomes de variáveis: é isso que impede a busca de casar.
- A mesma condição é redigida de formas diferentes conforme a versão. Se os resultados não batem, some o número da versão.
- Antes de colar uma correção, veja o que ela descarta. Algumas não dá para desfazer.
Perguntas frequentes
Q. O que significa “You're importing a component that needs useState. This React hook only works in a client component.”?
No App Router todo componente é um componente de servidor por padrão, e um componente de servidor importou um arquivo que usa um hook que só faz sentido no navegador, como useState. A diretiva é uma única linha 'use client' no topo do arquivo, e acrescentá-la puxa aquele arquivo e tudo que ele importa para o pacote do cliente — por isso marcar o menor pedaço que precisa de estado, em vez da página inteira, é a escolha barata. No sentido oposto, dividir de forma que um componente de cliente receba componentes de servidor como filhos mantém a busca de dados no servidor. O Next.js 13 escrevia a mesma situação como "It only works in a Client Component but none of its parents are marked with \"use client\"".
Q. Como corrigir?
Não há comando de uma linha. A explicação acima diz o que verificar.
Q. Qual ferramenta imprime isso?
next. Fica em Build e tipos e a mensagem tem 16 palavras.