Using javascript class causes build failure

#1

I’m loading a javascript file (located in source/javascripts) by using a helper method <%= javascript_include_tag "vanilla-tilt.js" %>

The desired effect is tilting of images, and it works great in my browser, everything seems to load and work fine.

When I try to build the site, however, I get a syntax error that appears related to the fact that the javascript is using a class. I pared the file down to the simplest structure to test this:

This version builds successfully:
const VanillaTilt = (function () {
'use strict';

return VanillaTilt;

}());

This version causes the build to fail with an error that says “Unexpected token: name (VanillaTilt)”
const VanillaTilt = (function () {
'use strict';

class VanillaTilt {}

return VanillaTilt;

}());

The only difference being the addition of class VanillaTilt{} which is where all of the code for the desired effect lives.

I’m not a javascript expert, but I have looked into the syntax for creating classes and I can’t see anything that appears wrong.

Is there something inherent in Middleman that would cause this build to fail? I know that javascript classes aren’t supported on IE/Edge unless enabled by individual users, would that be something that Middleman is checking for and therefore throwing a syntax error?

#2

To be precise, Middleman is not checking the Javascript syntax, only compiling it, at most, using third-party libraries. Please check your config.rb if you have Javascript minification enabled or any other sort of JS-postprocessing. Maybe the uglyfier or other process does not understand your syntax? Also, please check in your browser if you have any console warnings/errors. Javascript errors are silent to the user, as you know, so even if the code is running, there can still be some problems.

#3

Thanks for your reply!

I just hunted down this problem to be caused by Middleman using Uglifier which doesn’t like the const keyword. By adding harmony: true to the Uglifier declaration in my config.rb file the site was able to build successfully without having to change the syntax of the actual javascript.