Module BrowserSync is not available! You either misspelled the module name [...]

Issue details

I am trying to use browser-sync inside a ghost template so I can reload the browser when changes have been made. When I navigate to localhost:3001, I can see the UI skeleton without any data (still in loading state):

When I look into the console (of the browser-sync UI at port 3001), I can see these errors, what did I do wrong? I’ll attach the errors in text form at the end of this issue.

Steps to reproduce/test case

I am simply using

browserSync.init({
  proxy: "localhost:2368",
});

in my gulp file and I tried browser-sync versions 2.27.4, 2.27.1 and 2.26 (with no success).

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

• Browsersync [2.27.4, 2.27.1, 2.26]
• Node [12.22.1]
• Npm [6.14.12]

Affected platforms

• windows

Browsersync use-case

• Gulp

const browserSync = require("browser-sync").create();
browserSync.init({
  proxy: "localhost:2368",
});

and then browserSync.stream() at some places but this shouldn’t be related to the problem at hand.

Angular error in textform:

Uncaught TypeError: e.lowercase is not a function
    Angular 3
    Webpack 5
angular-sanitize.js:265:32
Uncaught Error: [$injector:nomod] Module 'BrowserSync' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
https://errors.angularjs.org/1.8.2/$injector/nomod?p0=BrowserSync
    Angular 4
    <anonymous> pages-config.js:6
    <anonymous> pages-config.js:134
angular.js:138:11
Uncaught Error: [$injector:nomod] Module 'BrowserSync' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
https://errors.angularjs.org/1.8.2/$injector/nomod?p0=BrowserSync
    Angular 4
    <anonymous> client-js.js:6
    <anonymous> client-js.js:94
angular.js:138:11
Uncaught Error: [$injector:modulerr] Failed to instantiate module BrowserSync due to:
[$injector:nomod] Module 'BrowserSync' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

https://errors.angularjs.org/1.8.2/$injector/modulerr?p0=Bro…0http%3A%2F%2Flocalhost%3A3001%2Fjs%2Fapp.js%3A2%3A272529%0A
    Angular 15
    Webpack 5

[ronilaukkarinen]

Only workaround for now:

npm install browser-sync@2.23.6 --save-dev

[dodaydream]

I am also getting this issue on browser-sync 2.27.7 and node 17.2.0, browser-sync-webpack-plugin 2.3.0

I’m using browser-sync via laravel-mix 6.0.25