Babel Invalid Token pointing out the equals sign


#1

I don’t often develop web sites but when I do I use Aurelia. So I’m back at it again and I thought after updating my npm packages with the latest babel and the latest preset-env that this problem would go away. Every time I try to compile anything like the below code it blows up on the first equals sign. I ultimately end up relenting, creating a constructor and make the same assignments to ‘this’ inside the constructor. But I’m curious as to why I can’t seem to use ESNext while everything else I’m doing seems to work fine for my purposes.

export class App {
products = [
{ id: 0, name: ‘Motherboard’ },
{ id: 1, name: ‘CPU’ },
{ id: 2, name: ‘Memory’ },
];

  selectedProductId = null;
}

Here is a snippet from my gulp file that invokes babel with the env preset.

gulp.task(‘compile-to-war’, function() {
return gulp.src(paths.files_to_compile).pipe(babel({ presets: [‘env’]})).pipe(gulp.dest(paths.war));
});

And some dev dependencies from my package Json.

"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",

#2

I solved this issue with

npm install --save-dev babel-plugin-transform-class-properties

… and then adding an array of plugins to the gulp-babel tasks.

I built my project a while ago to integrate with Maven and java war file deployment so can’t take advantage of the au cli but I did look at what it outputs to figure this out.


#3

You can instead add babel-preset-stage-1 (it includes babel-plugin-transform-class-properties) to cover more latest syntax.