Invalid Character IE 11

Question

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.com/

Has anyone got a fix for this?

Answer 1

I'm annoyed this got a down vote as it is an actual problem..

Foundation should be doing this for me..

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

Answer 2

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

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

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 comment out excluded files ( most of these are foundation related ) from being parsed through babel-loader

So literals like in this example:

`foo${bar}`;

Would become this:

"foo" + bar;

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