Browserify Error { Error: Plugin 1 specified in “base” provided an invalid property of “loose” while parsing file: mypath\react-app.js

Question

I try to use transform-es2015-classes plugin with gulp, browserify, reactify.

var gulp = require('gulp');
var browserify  = require('browserify');
var babelify    = require('babelify');
var source      = require('vinyl-source-stream');
var buffer      = require('vinyl-buffer');
var uglify      = require('gulp-uglify');
var sourcemaps  = require('gulp-sourcemaps');
var livereload  = require('gulp-livereload');
var reactify = require('reactify');
var util = require('gulp-util');


gulp.task("reactcompile", function () {
    // app.js is your main JS file with all your module inclusions
    return browserify({entries: './src/main/app/reactjs/react-app.js', debug: true})
        .transform("babelify", 
        {
          plugins: [
            'transform-es2015-classes', { loose: true }
          ],
            presets: ["es2015", "react", "stage-0"] 
        })
        .bundle()
        .on('error', util.log.bind(util, 'Browserify Error'))
        .pipe(source('react-app.js'))
        .pipe(buffer())
        .pipe(gulp.dest('./build'))
        .pipe(livereload());
});

As I run gulp, I get the error:

[12:06:45] Browserify Error { Error: Plugin 1 specified in "base" provided an invalid property of "loose" while parsing file: mypath\\react-app.js

Is my syntax wrong or what is the problem?

Answer 1

You're missing a set of [] s.

plugins: [
  'transform-es2015-classes', { loose: true }
]

should be

plugins: [
  ['transform-es2015-classes', { loose: true }]
]

so the plugin and its arguments are a single item in the plugins array.