IE11 Syntaxerror

[c2ofh]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I've included "signature_pad": "^3.0.0-beta.3" in angular6 via package.json
It's working well in all Browsers, but on IE11 the website can not be loaded due to an error.

"Syntaxerror" without any description what's wrong.

[szimek]

I have no idea how Angular 6 build process looks, but you should compile it using the same Babel config that you use to compile your own code.

You can also use webpack resolve.alias feature (not tested), which should allow you to load the already compiled version instead:

module.exports = {
  //...
  resolve: {
    alias: {
      signature_pad: 'signature_pad/dist/signature_pad.js'
    }
  }
};

[c2ofh]

Thank you for your quick response.
I will give it a try. I will also try a babel polyfill if your idea isn't working. I never used it before.

[mkmule]

Try to import in this way:
change from:
import SignaturePad from 'signature_pad';
to:
import * as SignaturePad from 'signature_pad/dist/signature_pad';

[riswar]

function download(dataURL, filename) {
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
window.open(dataURL);
}
### //Add below statement on app.js - it works as other two are not supported on IE 11
else if(window.navigator && window.navigator.msSaveOrOpenBlob){
var blobwin = dataURLToBlob(dataURL);
window.navigator.msSaveOrOpenBlob(blobwin, filename);
}
else {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);

var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;

document.body.appendChild(a);
a.click();

window.URL.revokeObjectURL(url);

}
}

[wachunga]

@sdqwerty's workaround worked for me. However, it's worth noting that webpack has a field called mainFields which defaults to ['browser', 'module', 'main']. These are in priority order, and signature_pad does not include a browser in package.json, so module gets picked up. This maps to the .m.js file, which includes ES6 syntax like class -- which IE11 does not support.

@szimek I recommend you update package.json to include a browser field as per npm's recommendations here:
https://docs.npmjs.com/files/package.json#browser

That should clear up these IE11 issues.

[gitge]

This worked for me:

module.exports = {
  resolve: {
    alias: {
      'signature_pad': 'signature_pad/dist/signature_pad' // <- hier without '.js' at the end!
    }
  }
};

And with Laravel-Mix:

mix.webpackConfig({
    resolve: {
        alias: {
            'signature_pad': 'signature_pad/dist/signature_pad',
        }
    }
});

[HereChen]

I have no idea how Angular 6 build process looks, but you should compile it using the same Babel config that you use to compile your own code.

You can also use webpack resolve.alias feature (not tested), which should allow you to load the already compiled version instead:

module.exports = {
  //...
  resolve: {
    alias: {
      signature_pad: 'signature_pad/dist/signature_pad.js'
    }
  }
};

v3.0.0-beta.4 compiled version does not support IE11 because of class keyword.

[nemchik]

Closed because fixed?

[UziTech]

Closed because ie11 is no longer supported

[nemchik]

For those who find this in the future, Babel is able to transpile this too resolve the issue.