Identifier 'browserSync' has already been declared

Question

I keep getting an error "Identifier 'browserSync' has already been declared" but i cant see where the problem is.Here is my code

// Watch files
function watchFiles() {
    gulp.watch("*.js", gulp.series(scriptsLint, scripts, browserSyncReload));
    gulp.watch(["processHTML"], gulp.series(browserSyncReload));
  }

//Task Live Reload

function browserSync(done) {
    browserSync.init({
      server: './dist',
      port: 8080,
      ui: {
        port: 8081
      }
    })
    done()
  };

// BrowserSync Reload
function browserSyncReload(done) {
    browserSync.reload();
    done();
  }

// define complex tasks
const js = gulp.series(scriptsLint, scripts);
const build = gulp.parallel(processHTML,js);
const watch = gulp.parallel(watchFiles, browserSync);

function browserSync(done) { the name of the function is equal to the library browserSync, so just rename it to be browserSyncFunc(done). — Daniel Aranda, Sep 12 '19 at 19:45
@MiamiLarry is that a reason to choose as accepted answer, one answer that was given 5 minutes after mine saying the same thing as mine...and even funnier after you have opted to choose mine as accepted in first place? just really curious — dippas, Sep 12 '19 at 20:00
@dippas i dont get your statement,both of your answers were correct and i upvoted you both — Miami Larry, Sep 13 '19 at 05:58
@MiamiLarry well you didn't upvote both, given the other user has negative score (+0/-1) and I think you are confusing the green tick with upvote (because you tick my answer as accepted), the up/down arrows are for upvotes/downvotes, the green tick are to mark the answer as the "best answer"/"most helpful answer" , and given you have a low reputation (below 15) you can't upvote yet. — dippas, Sep 13 '19 at 10:29
@dippas please understand i have zero experience in this field i didnt know that — Miami Larry, Sep 13 '19 at 16:18

score 1 · Answer 1 · answered Sep 12 '19 at 19:48

You need to rename your function browserSync to other name, because that's a keyword reserved for the BrowserSync library.

Something like this:

// Watch files
function watchFiles() {
    gulp.watch("*.js", gulp.series(scriptsLint, scripts, reload));
    gulp.watch(["processHTML"], gulp.series(reload));
  }

//Task Live Reload

function localServer(done) {
    browserSync.init({
      server: './dist',
      port: 8080,
      ui: {
        port: 8081
      }
    })
    done()
  };

// BrowserSync Reload
function reload(done) {
    browserSync.reload();
    done();
  }

// define complex tasks
const js = gulp.series(scriptsLint, scripts);
const build = gulp.parallel(processHTML,js);
const watch = gulp.parallel(watchFiles, localServer);

score -1 · Accepted Answer · answered Sep 12 '19 at 19:53

Your browserSync() function, declared in line 9, is named the same as another variable in its scope, browserSync (in line 10), and needs to be renamed.

// Watch files
function watchFiles() {
    gulp.watch("*.js", gulp.series(scriptsLint, scripts, browserSyncReload));
    gulp.watch(["processHTML"], gulp.series(browserSyncReload));
  }

//Task Live Reload

function browserSyncFunc(done) {
    browserSync.init({
      server: './dist',
      port: 8080,
      ui: {
        port: 8081
      }
    })
    done()
  };

// BrowserSync Reload
function browserSyncReload(done) {
    browserSync.reload();
    done();
  }

// define complex tasks
const js = gulp.series(scriptsLint, scripts);
const build = gulp.parallel(processHTML,js);
const watch = gulp.parallel(watchFiles, browserSyncFunc /* I'm guessing you meant to use the browserSync function here, not the object */);

Identifier 'browserSync' has already been declared

2 Answers2