Browser-sync: Browser sync throws a TypeError on init

[agconti]

BrowserSync throws a TypeError when it attempts to reload:

[12:02:53] TypeError: undefined is not a function
    at Object.init (/Users/conti/dev/foodjournal-web/node_modules/browser-sync/lib/public/init.js:25:25)
    at Gulp.<anonymous> (/Users/conti/dev/foodjournal-web/gulpfile.js:39:15)
    at module.exports (/Users/conti/dev/foodjournal-web/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/conti/dev/foodjournal-web/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/conti/dev/foodjournal-web/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Users/conti/dev/foodjournal-web/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at Gulp.<anonymous> (/Users/conti/dev/foodjournal-web/node_modules/gulp/index.js:36:18)
    at Gaze.<anonymous> (/Users/conti/dev/foodjournal-web/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/index.js:18:14)
    at Gaze.emit (events.js:110:17)
    at Gaze.emit (/Users/conti/dev/foodjournal-web/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:129:32)

That points to the browser-sync gulp task:

gulp.task('browser-sync', function () {
  browserSync.init({
     server: {
       baseDir: "./public"
     }
   })
})

Any idea what could be going wrong? I'm using version 2.8.2.

[shakyShane]

Make sure you call create() first.

var browserSync = require('browser-sync').create();
var gulp = require('gulp');

gulp.task('browser-sync', function () {
  browserSync.init({
     server: {
       baseDir: "./public"
     }
   })
})

[agconti]

@shakyShane I'm calling create(). Here's my gulpfile for reference:

var gulp = require('gulp')
  , browserSync = require('browser-sync').create()
  , reload = browserSync.reload
  , changed = require('gulp-changed')
  , autoprefixer = require('gulp-autoprefixer')
  , sass = require('gulp-sass')
  , uglify = require('gulp-uglify')
  , flatten = require('gulp-flatten')
  , concat = require('gulp-concat')
  , gulpNgConfig = require('gulp-ng-config')

  // Path config
  , outputDir = './public'
  , scssSrc = outputDir + '/admin/main.scss'
  , jsSrc = ['/admin/app.js', '/admin/**/index.js','/admin/**/*.js'].map(function(path){
      return outputDir + path
    })

  // App config
  , configModule = 'config'
  , parseConfig = './config.json'
  , parseConfigOutput =  outputDir + '/admin/config/'
  , ngConfigOptionsDev = new NgConfigOptions('dev')
  , ngConfigOptionsProd = new NgConfigOptions('prod')


/**
 * Class for configuring app enviorments.
 * @param {string} env -- the target enviorment
 * @constructor
 */
function NgConfigOptions(env){
  this.environment = env || 'dev'
  this.createModule = false
  this.wrap = ';(function () {\n <%= module %> \n})()'
}

gulp.task('browser-sync', function () {
  browserSync.init({
     server: {
       baseDir: outputDir
     }
   })
})

gulp.task('sass', function () {
  return gulp.src(scssSrc)
    .pipe(changed(outputDir))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sass({errLogToConsole: true}).on('error', console.error.bind(console)))
    .pipe(gulp.dest(outputDir))
    .pipe(browserSync.stream())
})

gulp.task('config:dev', function () {
  return gulp.src(parseConfig)
    .pipe(gulpNgConfig(configModule, ngConfigOptionsDev))
    .pipe(gulp.dest(parseConfigOutput))
    .pipe(browserSync.stream())
})


gulp.task('config:prod', function () {
  return gulp.src(parseConfig)
    .pipe(gulpNgConfig(configModule,  ngConfigOptionsProd))
    .pipe(gulp.dest(parseConfigOutput))
    .pipe(browserSync.stream())
})


/**
 * Concatenates, minifies, and outputs site's javascript.
 * @return {stream}
 */
function buildJs() {
  return gulp.src(jsSrc)
    .pipe(changed(outputDir))
    .pipe(concat('main.min.js'))
    .pipe(uglify())
    .pipe(flatten())
    .pipe(gulp.dest(outputDir))
    .pipe(browserSync.stream())
}

gulp.task('build:js:dev', ['config:dev'], buildJs)
gulp.task('build:js:prod', ['config:prod'], buildJs)

gulp.task('build:dev', ['build:js:dev', 'sass'])
gulp.task('build:prod', ['build:js:prod', 'sass'])

gulp.task('default', ['build:js:dev', 'sass', 'browser-sync'], function(){
  gulp.watch(['./public/**/*.scss'], ['sass'])
  gulp.watch([jsSrc], ['build:js:dev'])
  gulp.watch(["./public/**/*.html"], [reload])
})

[agconti]

Can we reopen this issue?

[shakyShane]

If you can provide a sample repo showing the issue, then sure :)

[Scrivs]

I'm encountering the same issue when I try to run browsersync off the local filesystem. When I use Vagrant and a domain in my gulpfile everything works fine, but if I try to go through a proxy it will load the first time and then break on any changes I make to my styles afterwards.

Here is a very basic one page site repo that shows the issue: https://github.com/MakersCabin/LearnCSS

[BirgitPohl]

I'm trying to add it into a watcher that converts Coffeescript to Javascript.

browserSync = require('browser-sync').create #call this before gulp
gulp    = require('gulp-param')(require('gulp'), process.argv)

gulp.task 'default', ['browser-sync', 'watch'], ->

gulp.task 'browser-sync', ->
  browserSync.init ->
    server: "./build"

gulp.task 'watch', ->
  #something todo

[14:36:33] Using gulpfile MYPATH/gulpfile.js
[14:36:33] Starting 'browser-sync'...
[14:36:33] 'browser-sync' errored after 1.21 ms
[14:36:33] TypeError: browserSync.init is not a function
  at Gulp.<anonymous> (/Users/MYPATH/build/gulpfile.coffee:38:15)
  at Gulp.wrappedTaskFunction (/Users/MYPATH/node_modules/gulp-param/index.js:31:29)
  at module.exports (/Users/MYPATH/node_modules/orchestrator/lib/runTask.js:34:7)
  at Gulp.Orchestrator._runTask (/Users/MYPATH/node_modules/orchestrator/index.js:273:3)
  at Gulp.Orchestrator._runStep (/Users/MYPATH/node_modules/orchestrator/index.js:214:10)
  at Gulp.Orchestrator.start (/Users/MYPATH/node_modules/orchestrator/index.js:134:8)
  at /usr/local/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:46:20
  at nextTickCallbackWith0Args (node.js:453:9)
  at process._tickCallback (node.js:382:13)
  at Function.Module.runMain (module.js:449:11)
  at startup (node.js:140:18)
  at node.js:1001:3

As recommended above, I put the create method before the gulp variable. The error message is the same.

The following fixed my issue:

Note the little comment before .create in the first line

browserSync = require('browser-sync')#.create #call this wherever the heck you want
gulp    = require('gulp-param')(require('gulp'), process.argv)

gulp.task 'default', ['browser-sync', 'watch'], ->

gulp.task 'browser-sync', ->
  browserSync.init(
     server: "./build")

gulp.task 'watch', ->
 #something todo

My json file for version checking

[...]
  "devDependencies": {
    "browser-sync": "^2.12.5",
    "gulp": "^3.9.1",
    "gulp-jshint": "^2.0.0",
    "jshint": "^2.9.2",
    "jshint-stylish": "^2.1.0"
  }
}

[devnix]

I'm also affected by this bug, only when I inclide this Javascript, I have no idea where could be the problem: http://imulus.github.io/retinajs/

[devnix]

I could get it working following the #1234 issue