El ChunkLoadError en Next.js no es un misterio de Webpack, es tu caché.
Sí, lo digo así de directo. Cada vez que veo a alguien en foros o Stack Overflow volviéndose loco con un ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed, mi primera pregunta es siempre la misma: ¿Borraste la carpeta .next? Porque de hecho, en el 90% de los casos, esa es la solución. Y me frustra un poco la sobreingeniería que veo a veces para algo tan simple.
Mira, alguien en Stack Overflow se topó con esto justo siguiendo el tutorial de Next.js. El error aparece, pero la aplicación igual funciona si cierras el pop-up. Es un patrón clásico. La gente empieza a pensar en configuraciones raras de Webpack, en next.config.js, o en algún bug profundo del framework.
La solución pragmática
La verdad es que, en desarrollo, Next.js a veces se enreda con su propia caché de compilación. Puede pasar por muchas razones: cambiaste de rama, moviste archivos, actualizaste dependencias, o simplemente el dev server se quedó pegado. El mensaje ChunkLoadError significa que el navegador intentó cargar un pedazo de código (un chunk) y no lo encontró en la ruta esperada. Esto casi siempre es porque el chunk que Next.js generó antes ya no corresponde con el código actual, pero el navegador o el mismo Next.js siguen esperando la versión antigua.
En mi caso, y esto lo aprendí a los golpes, la solución es brutalmente simple:
rm -rf .next
npm run dev # o yarn dev, pnpm dev
Después de borrar la carpeta .next, que es donde Next.js guarda todo lo compilado y cacheados, tienes que reiniciar tu servidor de desarrollo. Y ojo que también es importante forzar una recarga en el navegador (Cmd+Shift+R en macOS o Ctrl+F5 en Windows/Linux) para asegurarte de que no haya una caché del navegador molestando.
¿Por qué pasa esto?
Nadie sabe la razón exacta al 100% de por qué Next.js se desordena así con su caché interna. Es un detalle de implementación de cómo Webpack y Next.js manejan la compilación y los chunks. Lo importante es que, como desarrolladores, tenemos que ser pragmáticos. Si la solución simple y directa funciona, no vale la pena quemarse la cabeza con la sobreingeniería de intentar entender cada byte que falla.
A mí me pasó varias veces cuando estaba trabajando en proyectos con muchas ramas o cuando hacía refactors grandes. Recuerdo que al principio, este error me costó horas de depuración inútil, pensando que había roto algo grave en mi código. Empezaba a revisar imports, versiones de paquetes, y un montón de cosas que no tenían nada que ver.
Si tuviera que empezar de cero...
Si estuviera comenzando hoy con Next.js, desde el día uno me crearía el hábito de que, ante cualquier error de compilación o carga de módulos que no tenga una explicación obvia y clara en la consola, lo primero que hago es borrar la carpeta .next y reiniciar. Me habría ahorrado muchísimos dolores de cabeza y tiempo que invertí en la sobreingeniería de mi propio cerebro, buscando fantasmas donde solo había un archivo de caché viejo.