Menu icon Foundation
IE9, IE10, IE11 getting a "Syntax error" in plugins code

Hi,

I am using a couple Foundation 6 plugins in my application. I noticed that in multiple versions of IE, I get a "Syntax error" whenever the plugin calls a class or a const (See screenshot). I thought Foundation 6 was compatible with versions of IE9+

Does anyone know how to not have IE error on plugins code?

IE9IE10ie11syntax errorclassconst

Hi,

I am using a couple Foundation 6 plugins in my application. I noticed that in multiple versions of IE, I get a "Syntax error" whenever the plugin calls a class or a const (See screenshot). I thought Foundation 6 was compatible with versions of IE9+

Does anyone know how to not have IE error on plugins code?

David Witt about 3 years ago

I had the same issue with IE11. It has to do with the difference between the 'source' code syntax and the built 'dist' code.

Take foundation.util.keyboard.js from the /js directory

parseKey(event) { 
....
}

and compare it to the foundation.util.keyboard.js from the /dist directory

parseKey: function (event) {
...
}

Make sure you are using the compiled version of the code in your site and you shouldn't see any issues with syntax errors.

Rafi Benkual over 3 years ago

Hmm, I'm not seeing these errors on the Foundation docs with IE9 or any other browser. Is there something specific telling you this a Foundation JS related issue? What are these errors causing?

Mike Wojcik over 3 years ago

I have this exact same issue. It's frustrating as it causes an error and makes other javascript functionality on the site stop working. It only happens in IE browsers.

To reproduce:

  • Include the foundation.util.mediaQuery.js file in your project.
  • Open up for your site in Internet Explorer
  • Open the browser's console and you'll see an error similar to SCRIPT1003: Expected ':'

If you click on the error, you'll be taken to the line in the code that is causing the issue, which is the "_init() {" line in the code below:

var MediaQuery = {
  queries: [],

  current: '',

  /**
   * Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
   * @function
   * @private
   */
  _init() {