Browserify breaking function. Error “Uncaught ReferenceError: foo is not defined”

Question

I have a function which looks like this:

foo = () => {
  someClass.foo((error, someVariabel) => {
    // code
  });
}

If I run this it works. But I want to expand this project so I now need to run Browsify which changes the function to look like this:

foo = function foo() {
  someClass.foo(function (error, someVariabel) {
    // code
  });
};

This function now gives an error on the line = function foo() { which says "Uncaught ReferenceError: foo is not defined" in Chrome.

Does anyone have an idea on why this is happening and what I need to do?

my gulp file looks like this:

gulp.task('scripts', function() {
    gulp.src('js/*.js')
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(browserify())
        .pipe(gulp.dest('dist/js'));
});

Any ideas?

Answer 1

Babel works really poorly on browserify, so they recommend babelify

gulp.task("bundle", function () {
    return browserify({
        entries: "./src/index.js"
    })
        .transform(babelify.configure({
            presets: ["@babel/preset-env"]
        }))
        .bundle()
        .pipe(source("bundle.min.js"))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest("./build"));

});