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): grafik

When I look into the console (of the browser-sync UI at port 3001), I can see these errors, what did I do wrong? grafik 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)

Commits related to this issue

Most upvoted comments

Only workaround for now:

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

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

I’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.6 results in 39 vulnerabilities (6 low, 7 moderate, 16 high, 10 critical) 😭

Gonna put browser-sync on ice until this is fixed.

To whoever is facing this issue. I cracked the problem.

  1. @shakyShane had upgraded the angular deps in 2.27.5 and released it - https://github.com/BrowserSync/browser-sync/compare/v2.27.4...v2.27.5 - but he did not merge them to master - don’t know why
  2. They were merged to master in v2.27.8 - https://github.com/BrowserSync/browser-sync/pull/1940 & https://github.com/BrowserSync/browser-sync/compare/v2.27.4...v2.27.8
  3. So, this issue is fixed in all versions >=v2.27.5 except v2.27.6 & v2.27.7 because the angular upgrade changes were not present. I don’t know why the angular upgrade changes are not carry forwarded to v2.27.6 (https://github.com/BrowserSync/browser-sync/compare/v2.27.4...v2.27.6) & v2.27.7 (https://github.com/BrowserSync/browser-sync/compare/v2.27.4...v2.27.7) @shakyShane

So, the solution is simply do npm install browser-sync@^2.27.8 - it will fix the problem

Same 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.