[Bug] Cli or Rollup error to import pollyfils

[luchillo17]

Short description of the problem:

Ionic-app-scripts or Rollup doesn't play nice with Intl and web-animation-js.

What behavior are you expecting?

No errors from the pollyfils.

Steps to reproduce:

1. Just import the pollyfils in the app.module.ts file.
2. The errors are well reported in this Ionic forum thread: how-to-rollup-pollyfils

Which @ionic/app-scripts version are you using?
Ionic info output:

Your system information:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS 
Node Version: v6.6.0

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
All in thread.

[danbucholtz]

Can you link me to the polyfills on npm? I'll try to get something working.

Thanks,
Dan

[luchillo17]

Sure:

• Intl
• web-animations-js

[danbucholtz]

@Luchillo,

web-animations-js should just be imported like this. I didn't need to change anything to get it to work. It does not provide a default import, so we must use the long import form which provides a wrapper object containing all of the exports. Since nothing is exported, it will be an empty object. However, if you look in the bundle, the polyfill is there so everything worked correctly.

import * as webAnimation from 'web-animations-js'

intl is giving me a little bit of grief. I am sure it can be done but I think the best bet for now is to just use it via a script tag as described here.

Let me know what you think or if you have any additional questions. I will re-open if necessary.

Thanks,
Dan

[luchillo17]

I tough that way of importing puts everithing in the variable named webAnimation and wouldn't be a pollyfil any more, like an ifee (don't remember how's written), or something like that, also tslint will complain about unused variable.

[danbucholtz]

Try just

import 'web-animation-js'

That should fix tslint. As far as the scope thing, generally polyfills provide a replacement for browser-level functionality, so they are operating on top-level items like window, etc. I think it will probably work. I have imported polyfills like this in the past.

Give it a shot and let me know how it goes.

Thanks,
Dan

[luchillo17]

I did, tslint doesn't complains with that import, but then the library does in the browser and i think it's because minification, i think Rollup complains about the lib using eval (as stated in the forum thread).

[luchillo17]

I've tested again the web-animation-js pollyfil and it seems the same error pops up in both ways of the import, both with direct import and with the default one, the difference is the file from which the error happens in browser.

With direct import:

import 'web-animations-js';

error:

With default import:

import * as webAnimations from 'web-animations-js';

webAnimations;

error:

And in both the same Rollup complain:

[14:56:15]  rollup: Use of `eval` (in 
/home/carlos/Carlos/OSGroup/startApp/node_modules/web-animations-js/web-animations.min.js)
is strongly discouraged, as it poses security risks and may cause issues with minification.
See https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval for more details

[danbucholtz]

Sorry Luchillo, just include them via script tags then.

Thanks,
Dan

[luchillo17]

I guess the rollup copy plugin it is then, btw do you know if pollyfils are ok to be imported with async script tags?

[luchillo17]

Actually i don't see any plugin for copying the files on build time, will i have to copy the files by hand into assets?

[danbucholtz]

You can do it either way. For now, just copy them by hand to assets.

Thanks,
Dan

[luchillo17]

I'm seriously missing Webpack right now.

[luchillo17]

If so do i have to make the same with font awesome?