next · Compilación y tipos
El mensaje
You're importing a component that needs useState. This React hook only works in a client component.
Qué significa
En el App Router todo componente es un componente de servidor por defecto, y un componente de servidor importó un archivo que usa un hook que solo tiene sentido en el navegador, como useState. La directiva es una sola línea 'use client' arriba del archivo, y añadirla arrastra ese archivo y todo lo que importa al paquete del cliente: por eso marcar la pieza más pequeña que necesita estado, y no la página entera, es la opción barata. En sentido inverso, dividir de modo que un componente de cliente reciba componentes de servidor como hijos mantiene la obtención de datos en el servidor. Next.js 13 expresaba lo mismo como "It only works in a Client Component but none of its parents are marked with \"use client\"".
El arreglo
No hay un comando de una línea. La explicación dice qué revisar.
- Lo imprime
- next
- Compilación y tipos
- 10
Los errores de compilación son una herramienta que se niega antes de que nada se ejecute, así que no rompen nada en el momento en que aparecen, pero plantean dos preguntas: ¿arreglarás el tipo o la ruta para que coincidan con la forma real, o empujarás esa única línea con un as any o un comentario de supresión? Y es aquí donde las cosas que solo son ciertas en tu máquina —mayúsculas, extensiones y variables de entorno— se muestran por primera vez.
Cómo leer un mensaje de error
- Lee desde la primera línea. Cuanto más abajo, más son las tripas de la herramienta; la causa suele estar arriba.
- Si hay un archivo y un número de línea, empieza ahí: no el marco superior de la pila, sino la línea más alta que nombre un archivo tuyo.
- Busca el mensaje literal, pero quita antes tus rutas y nombres de variables: eso es lo que impide que la búsqueda coincida.
- La misma condición se redacta distinto según la versión. Si los resultados no cuadran, añade el número de versión.
- Antes de pegar un arreglo, comprueba qué descarta. Algunos no se pueden deshacer.
Preguntas frecuentes
Q. ¿Qué significa «You're importing a component that needs useState. This React hook only works in a client component.»?
En el App Router todo componente es un componente de servidor por defecto, y un componente de servidor importó un archivo que usa un hook que solo tiene sentido en el navegador, como useState. La directiva es una sola línea 'use client' arriba del archivo, y añadirla arrastra ese archivo y todo lo que importa al paquete del cliente: por eso marcar la pieza más pequeña que necesita estado, y no la página entera, es la opción barata. En sentido inverso, dividir de modo que un componente de cliente reciba componentes de servidor como hijos mantiene la obtención de datos en el servidor. Next.js 13 expresaba lo mismo como "It only works in a Client Component but none of its parents are marked with \"use client\"".
Q. ¿Cómo se arregla?
No hay comando de una línea. La explicación de arriba dice qué revisar.
Q. ¿Qué herramienta lo imprime?
next. Está en Compilación y tipos y el mensaje tiene 16 palabras.