In IE 11 and IE 10 I am having a invalid character error on the line below:

if (!plugin.$element.attr(``data-${ pluginName }``)) {

I know this is due to ES6 not being supported but I do not know how I can sort this out. Foundation already includes babel and I thought that this script below would fix the issue but hasn't.

return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('foundation.js', {
      newLine:'\n;'
    }))
    .pipe($.if(isProduction, uglify))
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('assets/javascript'))
    .pipe(browserSync.stream());
});

This is a problem in the foundation.core.js file that is included with Foundation.

To see this problem you can navigate to the below url and load it in IE 11 or 10: /

Has anyone got a fix for this?

In IE 11 and IE 10 I am having a invalid character error on the line below:

if (!plugin.$element.attr(``data-${ pluginName }``)) {

I know this is due to ES6 not being supported but I do not know how I can sort this out. Foundation already includes babel and I thought that this script below would fix the issue but hasn't.

return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('foundation.js', {
      newLine:'\n;'
    }))
    .pipe($.if(isProduction, uglify))
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('assets/javascript'))
    .pipe(browserSync.stream());
});

This is a problem in the foundation.core.js file that is included with Foundation.

To see this problem you can navigate to the below url and load it in IE 11 or 10: http://b20.2c7.mwp.accessdomain./

Has anyone got a fix for this?

• javascript
• jquery
• internet-explorer
• zurb-foundation

• Why has this been marked down? – Max Lynn Commented Nov 8, 2016 at 20:12

2 Answers 2

I fixed the problem by re installed bower and it worked fine.. odd..

Internet Explorer 11 doesn't support some of ES6 features. Along with these non supported are template literals.

See https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Template_literals for patibility.

Best approach would be to use babel and its plugin to transform template literals.

Install the babel plugin

npm install --save-dev babel-plugin-transform-es2015-template-literals

Add it in .babelrc in plugins section

// without options
{
  "plugins": ["transform-es2015-template-literals"]
}

// with options
{
  "plugins": [
    ["transform-es2015-template-literals", {
      "loose": true,
      "spec": true
    }]
  ]
}

IN gulpfile.babel.js, make sure that everything is parsed through babel-loader, so probably ment out excluded files ( most of these are foundation related ) from being parsed through babel-loader

So literals like in this example:

`foo${bar}`;

Would bee this:

"foo" + bar;

see more: https://www.npmjs./package/babel-plugin-transform-es2015-template-literals