browser-sync: 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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 8
- Comments: 21 (2 by maintainers)
Only workaround for now:
I am also getting this issue on browser-sync
2.27.7and node17.2.0, browser-sync-webpack-plugin2.3.0I’m using browser-sync via laravel-mix
6.0.25I’m getting same issue in both @2.27.5 and @2.27.7 Win10, npm 8.1.2 trying command line
browser-sync start --proxy...is there a workaround?Downgrading to
browser-sync 2.23.6results in39 vulnerabilities (6 low, 7 moderate, 16 high, 10 critical)😭Gonna put
browser-syncon ice until this is fixed.To whoever is facing this issue. I cracked the problem.
So, the solution is simply do
npm install browser-sync@^2.27.8- it will fix the problemSame problem here using Node 14 LTS on linux.
I have the same problem, any idea about when this will be fixed?
Hello, I have the same issue. It is because of this: https://stackoverflow.com/questions/50448326/uncaught-typeerror-angular-lowercase-is-not-a-function The angular version was updated for 6 days.