Broken in older versions of iOS Safari (v. 9.0)

[danielkuhlwein]

Broken in older versions of iOS Safari (and probably other browsers) that don't support ECMAScript 6 features such as let.

Throws the following error:

---

I was able to fix this issue by simply changing 'let' to 'var' in confetti.module.mjs:

OLD

export let create = module.exports.create;

NEW

export var create = module.exports.create;

[catdad]

I am a little confused, maybe you can help:

ES6 modules can only run in an environment which supports ES6 (including things like let). Now, I saw you in the Angular ticket, so I assume that you have an Angular project? And so you are using import and having a build (webpack?) resolve all those imports into a bundle? But this is where my confusion happens. You are targeting older ES5 browsers, but are not using a babel transform for those browsers? Is that because all your code is ES5?

I surely can change the ES6 module to use only ES5 code, but I would think that you can't get every developer of an ES6 module to use only ES5 code. Is there a particular reason that your build is not transforming code correctly for the browsers you are targeting?

[danielkuhlwein]

Yes, we are using canvas-confetti in an Angular project (v. 7.0.2)

AFIK Angular uses Webpack to build all our imports into a bundle. I don't believe it uses Babel at all.

All of our Angular code is written in Typescript. AFIK the Angular CLI converts everything to Javascript to target ES6 and ES5 for all browser compatibility. I'm a little fuzzy on exactly what the Angular CLI is doing to achieve this, but all I know is 3rd party packages that are written for Angular such as ngx-device-detector for example, work fine. Whereas 3rd party js libraries (such as canvas-conffetti and as another example: libphonenumber-js) usually work fine, but are imported directly via a different import statement:

js libraries:

import * as confetti from 'canvas-confetti';

ts libraries (Angular specific):

import { DeviceDetectorService } from 'ngx-device-detector';

I believe this is due to the js libraries not being typed, and therefore not including a typed declaration file d.ts but I'm a little fuzzy here as well.

---

We haven't experienced the same bug that importing canvas-confetti introduced from other js libraries that we've included in our project before. For example:

• chart.js
• ckeditor
• cropperjs

---

I initially tried to resolve the issue by specifying that the code in confetti.module.mjs was ES6 via an inline comment:

/*jshint esversion: 6 */

But this didn't work.

---

Simply changing let to var works for us in our Angular project and we are happy with this solution moving forward. I hope the information I was able to provide could be helpful to you.

[catdad]

Okay, so looking around (I don't use Angular myself), I am finding that this is a known issue with the angular cli (angular/angular-cli#11892) and with webpack (webpack/webpack#6584). I am not seeing anyone mention a good solution here for using the Angular CLI in order to build third-party modules.

What I am seeing a lot of people doing is using webpack directly rather than the Angular CLI. This lets you control how files are transformed, and allows you to transform all files for the target browsers, rather than only transforming ts files and leaving regular javascript as-is (really, I can't believe the Angular team thought that is how it is supposed to work).

You could use import * as confetti from 'canvas-confetti/src/confetti.js'; which is the current main file, but I don't actually recommend that, as it might be different in future updates.

[catdad]

This has been fixed in 0.4.1. I still highly encourage using a build which will properly transform code to for the desired target browsers.