[SOLVED] Identifier 'browserSync' has already been declared

Identifier 'browserSync' has already been declared

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);

Solution

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 */);