Browsersync UI page not working for Laravel or Sage

Issue details

It seems that the UI page doesn’t work on my latest projects. The page will partially load but gives JS errors.

Steps to reproduce/test case

1. Create a laravel app or bedrock installation + sage.
2. Link valet (if using a Mac) or use something related to get a .test domain working. (Laragon for Windows)
3. If you’re creating a laravel app, place this in webpack.mix.js

mix.browserSync({
    proxy: 'yourprojectname.test',
});

Please specify which version of Browsersync, node and npm you’re running

• Browsersync [ 2.27.4 ]
• Node [ 15.14.0 ]
• Npm [ 7.19.1 ]

Affected platforms

• linux
• windows
• OS X
• freebsd
• solaris
• other (please specify which)

Browsersync use-case

• API (I’m running it with laravel Mix in my latest use case)
• Gulp
• Grunt.
• CLI

for all other use-cases, (gulp, grunt etc), please show us exactly how you’re using Browsersync

To get around using “artisan serve” a.k.a. 2 commands to develop my application. Everything works fine except the UI page which I use to example; enable remote debugging.

[j0eii]

for laravel 8.40 or above,

you need to downgrade the browsersync to the following version in package.json for temporary fix:

        "browser-sync": "~2.24.*",
        "browser-sync-webpack-plugin": "~2.2.*",

then run yarn install

[bfrickenstein]

Downgrade to 2.24.7 and it works.