[Foundation 6 & WordPress] SyntaxError: class is a reserved identifier class

I got this error when trying to use foundation 6’s JavaScript from Essential pack (downloaded from here: http://foundation.zurb.com/sites/download.html/)

SyntaxError: class is a reserved identifier
TypeError: $(...).foundation is not a function

I thought it was WordPress’s fault for not using $ for jQuery, but since I have wrapped my foundation function with namespace, I don’t think this is an issue.

(function($) {

  $(document).foundation();

})(jQuery);

After a quick Google search, I found others to have the same problem. It turns out that Essential pack in Foundation 6’s download page has a glitch. It gives you ES6 version of foundation.js instead of ES5.

The Solution

We just need to transpile Foundation 6 ES6 version to ES5 using BabelJS, and it will be fixed 🙂

You can find ES5 version of foundation.js here: https://gist.github.com/designil/78d05d815e651c25adb6

Have a nice day !


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *