'Laravel Mix + BrowserSync infinite loading out of the box

Something's making my out-of-the-box Laravel project with browser-sync and the browser-sync-webpack-plugin installed to load infinitely on the browser-sync page. It works fine on http://localhost, but the browser-sync (localhost:3000) version doesn't stop loading and displays no content, just a white page.

I found this question which was similar to mine but it doesn't have any answers.

This only recently started happening on my machine. At first I thought it was because of the antivirus or firewall but disabling them did no good. I can't even figure out what's causing the page to never load.

Here's what my webpack.mix.js file looks like:

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

Edit: Any tips on narrowing down the problem would also be appreciated.

Infinite loading

laravelwebpackbrowser-synclaravel-mix


Solution 1:[1]

For me, the problem was adding to the windows hosts file whatever url browsersync was proxying to, and point it to 127.0.0.1.

Solution 2:[2]

The default proxy target for the mix-browsersync package used in Laravel is app.test.

You can specify a different proxy target in the mix file:

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

And, if like me, you're using the artisan server for development, you can even target that (as long as you're running php artisan serve in you project):

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

Solution 3:[3]

I have a possible solution for you that worked for me.

My issue was that I was fixated on using the localhost:8000; instead I tried 127.0.0.1:8000. For those of you who don't know, that IP address is your default localhost IP address.

Try adding it like this to you webpack.mix.js file \/\/\/

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

Or alternatively you can use

mix.browserSync('127.0.0.1:8000');

Once done you can run npm run watch.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mav
Solution 2 HorusKol
Solution 3

Related Questions