Laravel Mix + BrowserSync carga infinita lista para usar
Avatar Mav
Pregunta contestada

Laravel Mix + BrowserSync carga infinita lista para usar

Algo está haciendo que mi proyecto Laravel listo para usar con browser-sync y el browser-sync-webpack-plugin instalado se cargue infinitamente en la página de sincronización del navegador. Funciona bien en http://localhost, pero la versión de sincronización del navegador (localhost:3000) no deja de cargarse y no muestra contenido, solo una página en blanco.

Encontré esta pregunta que era similar a la mía pero no tiene respuestas .

Esto comenzó a suceder recientemente en mi máquina. Al principio pensé que era por el antivirus o el firewall, pero deshabilitarlos no sirvió de nada. Ni siquiera puedo entender qué está causando que la página nunca se cargue.

Así es como se ve mi archivo webpack.mix.js:

mix.js('resources/assets/js/script.js', 'public/js')
.sass('resources/assets/sass/main.scss', 'public/css')
.disableNotifications()
.browserSync();

Editar: cualquier consejo para reducir el problema también sería apreciado.

Carga infinita

Mostrar la mejor respuesta

¿Está ejecutando la aplicación dentro de una caja de granja? o valet? ¿Has probado en otros navegadores? (no debería importar pero tal vez?). ¿Está utilizando una máquina mac/windows, porque recuerdo haber leído sobre problemas de localhost en mac/valet? Alguna información que podría ser útil para agregar a su pregunta.

Avatar Mav

No, no usar homestead o vallet; Lo probé en todos los navegadores sin éxito. Es una máquina con Windows, así que supongo que eso también descarta el problema de Mac. ¿Alguna idea para ver dónde está atascado? ¿Qué está causando la carga infinita?

¿Ha intentado codificar el proxy en la URL que definió en su archivo de host? browserSync({ proxy: 'my-domain.test' })

Avatar Mav

¡Tuve que agregar my-domain.test en el archivo de hosts y funcionó!

Avatar Mav
Respuesta aceptada

Para mí, el problema era agregar al archivo de hosts de Windows cualquier URL a la que el navegador sincronizaba el proxy y señalarlo a 127.0.0.1.

El destino del proxy predeterminado para el paquete mix-browsersync utilizado en Laravel es app.test.

Puede especificar un destino de proxy diferente en el archivo mixto:

mix
    .sass('resources/sass/app.scss', 'public/css')
    .js('resources/js/app.js', 'public/js')
    .browserSync('localhost');

Y, si como yo, está utilizando el servidor artesanal para el desarrollo, incluso puede apuntar a eso (siempre que esté ejecutando php artisan serve en su proyecto):

mix
    .sass('resources/sass/app.scss', 'public/css')
    .js('resources/js/app.js', 'public/js')
    .browserSync('localhost:8000');

Tengo una posible solución para ti que funcionó para mí.

Mi problema era que estaba obsesionado con usar el localhost:8000; en su lugar probé 127.0.0.1:8000. Para aquellos de ustedes que no saben, esa dirección IP es su dirección IP predeterminada de localhost.

Intente agregarlo así a su archivo webpack.mix.js \/\/\/

mix.browserSync({
    proxy: 'http://127.0.0.1:8000'
});

O alternativamente puede usar

mix.browserSync('127.0.0.1:8000');

Una vez hecho esto, puede ejecutar npm run watch.