BrowserSync doesn't work when es6-module-transpiler module is also used

[jas]

Just discovered this project, and I'm very excited to try it out! Unfortunately, I'm getting the following error when trying to use BrowserSync with Gulp:

   info  - socket.io started

/Users/Jason/Projects/tooling/node_modules/browser-sync/node_modules/cl-strings/index.js:19
        return clc[color](content);
                         ^
TypeError: Property 'green' of object function (/*…msg*/) {
    var data = fn._cliColorData, close = '';
    return reduce(data, function (str, mod) {
      close = '\x1b[' + mod[1] + 'm' + close;
      return str + '\x1b[' + mod[0] + 'm';
    }, '', true) + join.call(arguments, ' ') + close;
  } is not a function
    at modifier (/Users/Jason/Projects/tooling/node_modules/browser-sync/node_modules/cl-strings/index.js:19:26)
    at replacer (/Users/Jason/Projects/tooling/node_modules/browser-sync/node_modules/cl-strings/index.js:27:16)
    at String.replace (native)
    at compile (/Users/Jason/Projects/tooling/node_modules/browser-sync/node_modules/cl-strings/index.js:39:21)
    at /Users/Jason/Projects/tooling/node_modules/browser-sync/node_modules/cl-strings/index.js:63:16
    at Object.module.exports.initServer (/Users/Jason/Projects/tooling/node_modules/browser-sync/lib/messages.js:39:19)
    at Object.browserSync.initServer (/Users/Jason/Projects/tooling/node_modules/browser-sync/lib/browser-sync.js:426:28)
    at Object.browserSync.startServices (/Users/Jason/Projects/tooling/node_modules/browser-sync/lib/browser-sync.js:129:28)
    at /Users/Jason/Projects/tooling/node_modules/browser-sync/lib/browser-sync.js:96:27
    at runAgain (/Users/Jason/Projects/tooling/node_modules/browser-sync/lib/ports.js:63:24)

I cloned cli-color and cl-strings, ran their tests, and tried using them both in a tiny test script. I didn't run into any problems there. I can also use browser-sync from the command line without a problem.

The Gulp task I'm using comes directly from the examples on https://github.com/shakyShane/gulp-browser-sync

[jas]

After even more digging, I found it's because of an Object polyfill added by a dependency of es6-module-transpiler.

I've opened an issue there instead: esnext/es6-module-transpiler#94

I hope if anyone else runs into this problem, they will find this issue helpful.

[shakyShane]

Very interesting - thanks for doing so much 'digging'. Interested to know the outcome of this.

[jas]

@shakyShane I made a pull request on cli-color that would've resolved my issue using BrowserSync with the es6-module-transpiler: medikoo/cli-color#10

The authors of cli-color and es6-module-transpiler both asked if I had opened an issue on traceur-compiler, which adds the polyfill, so I've done that as well. google/traceur-compiler#775

Still unsure of what the outcome is going to be. Just hoping I will be able to use BrowserSync — it's much better than the alternatives.

[shakyShane]

Haha - you're like Sherlock Holmes!

thanks, and I hope this get's sorted asap :)

[jas]

I got a reply on traceur-compiler: google/traceur-compiler#775 (comment)

Everyone seems to be placing the blame on each other's project. 😕

I've spent too much time trying to figure out a resolution for this, so I think I'm going to have to move on from this.

@shakyShane Would you be open to using something like chalk instead of cli-color?

[shakyShane]

Yeah I can't see why not.

[shakyShane]

Latest BrowserSync should work fine now.

https://github.com/shakyShane/browser-sync/wiki/Release-history

[shakyShane]

0.6.0

[lozandier]

I think I'm having a similar problem with gulp-traceur. I keep getting an error from Browser-sync reading es6 js files it shouldn't be watching in the first place:

gulp.task 'browser-sync', ->
  files = [
    "./app/**/*.html"
    "./app/assets/css/**/*.css"
    "./app/assets/img/**/*.png"
    "./app/assets/js/main.js"
  ]
  browserSync(files, {
    files: files 
    server: {
      baseDir: './app'
    }
  })

gulp.task "js", ->
  return gulp.src './app/assets/es6js/**/*.js'
    .pipe plugins.sourcemaps.init()
    .pipe traceur()
    .pipe plugins.concat 'main.js'
    .pipe plugins.sourcemaps.write()
    .pipe gulp.dest( 'app/assets/js' ) 
    .pipe( plugins.filter( '**/*.js' ) )
    .pipe( reload( stream: true ) )
    console.log("completed concat")

gulp.task 'default', ['sass', 'js', 'haml', 'browser-sync'], ->
  gulp.watch './**/*.sass', ['sass']
  gulp.watch './**/*.haml', ['haml']
  gulp.watch '.app/assets/js/**/*.js', [ 'js' ]

```coffee

If I have a simple es6 javascript file like the following:

```coffee
let a = 2; 
console.log(a); 

I get the following error: