Arreglar la recarga del módulo caliente en Nuxt 3

HMR no actualiza la página en Nuxt 3

Si su Nuxt 3 Hot Module Reloading no funciona, es probable que se deba a un conflicto con los puertos de su cliente. Este suele ser el problema si su proyecto vive en un contenedor Docker o si está desarrollando de forma remota a través de SSH, ya sea con VS Code u otro editor.

El primer lugar para buscar un conflicto de puertos es en el registro de la consola de desarrollo del navegador. Puede abrir las herramientas de desarrollo presionando CTRL + SHIFT + I o F12.

Busque el error GET http://localhost:24678/_nuxt/net::ERR_CONNECITON_REFUSED

Si ve el error anterior, necesitará abrir el puerto 24678, para que el cliente Nuxt pueda comunicarse con su servidor backend. Alternativamente, puede configurar HMR para usar diferentes puertos.

Cambiar puerto Nuxt 3 HMR

Para cambiar el puerto Nuxt 3 HMR, necesitaremos editar el nuxt.config.ts expediente.

export default defineNuxtConfig({     vite: {         server: {             hmr: {                  clientPort: 24600,                  port: 24600             }         }       } })                Copied                                           

En el código anterior, el clientPort y port las variables deben ser un puerto que ya tenga abierto.

Reenviar un puerto en VS Code

Si usa VS Code, es posible que deba abrir puertos adicionales para que HMR funcione correctamente. Una vez que tenga la configuración SSH remota, debe agregar una línea a su archivo de configuración SSH.

• Presiona CTRL + MAYÚS + P
• Escriba la configuración SSH
• Haga clic en Remote-SSH: Abra el archivo de configuración de SSH
• Dentro del archivo .ssh_config, agregue LocalForward 127.0.0.1:24678 127.0.0.1:24678

El puerto predeterminado para Nuxt 3 HMR es 24678, pero puede cambiarlo a cualquier puerto que desee siempre que lo haga coincidir con el puerto HMR establecido dentro de su nuxt.config.ts en la sección anterior.

Ayuda adicional

No hay nada peor que configurar un proyecto completamente nuevo y que algo se rompa antes de haber codificado nada. Al iniciar un proyecto Nuxt 3, es posible que se le presente inmediatamente un problema con la recarga de su módulo activo. Aunque no es crítico para la función de su proyecto, no tener HMR reducirá drásticamente su tiempo de desarrollo. Si la solución anterior no lo ayudó y tiene un problema más específico con su HMR, verifique los problemas publicados en el Nuxt GitHub oficial. Asegúrese de buscar los problemas publicados antes de publicar uno propio.

Esperamos que esta guía le haya ayudado a solucionar su problema. Consulte nuestra sección de JavaScript para obtener más correcciones, consejos, trucos y más.