Aurelia-polyfills - how to use it?

1

We are using Aurelia JS in our project.
On IE11 we get error conntected to missing “includes” method:
Object doesn’t support property or method ‘includes’

We’ve installed aurelia-polyfills plugin but it doens’t work (or we use it in wrong way).

In main-webpack.js:

...
import 'aurelia-polyfills';
...

bootstrap(function (aurelia) {
    aurelia.use
        .standardConfiguration()
        .defaultResources()
        .developmentLogging()
        ...
        .plugin(PLATFORM.moduleName('aurelia-polyfills'));

    aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app-webpack'), document.body));
});

Our import statement is correct?
Should we do it in the same file or maybe in different? But where?

1 Like
2

If Im guessing right, its probably the api array.includes? If so, i dont recall it being the official polyfill for an Aurelia app. The polyfills module is intended to be the bare minimum required for Aurelia to work only. Maybe you could look for an extra polyfill, or use something like polyfill.io?

1 Like
3

Is this an Aurelia issue? In that case, I guess that other Aurelia developers targeting IE will have tackled this issue a long time ago.

If this is an issue with your own codebase, you could search for a suitable polyfill for Array.prototype.includes() yourself, as @bigopon suggested.

Perhaps it might also be possible to use Array.prototype.indexOf() to check if an item exists in an array.

Or you could write your own polyfill. I am not so sure if that is a great idea, but perhaps something like this might work:

Array.prototype.includes = Array.prototype.includes || function(valueToFind, indexFrom) {
  return this.indexOf(valueToFind, indexFrom) >= 0;
}
1 Like
4

Ok, dear collegues, I can use indexOf or other solution but why aurelia-pollyfils plugin is still in official repository, if it doesn’t work?! BUT, code inside includes function is the same like on MDN. And it works when you are using it in “normal” way (classic JS, no Aurelia).
So maybe only we just included this plugin wrongly?
I’ve also tried to invoke custom js functon with polyfill from MDN inside, but without possitive result. Code is execuded, but in Aurelia I get the same error on IE11 ( Object doesn’t support property or method ‘includes’)

1 Like
5

The aurelia-polyfills “plugin” is intended to guarantee a minimal set of standardized APIs that is needed to avoid having to have different code paths to do the same thing, or reinvent some wheels.

And it works when you are using it in “normal” way (classic JS, no Aurelia).
So maybe only we just included this plugin wrongly?

I’m guessing:

  • you didn’t include the polyfills correctly. Maybe try add to the top of your index.html:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.includes"></script>
  • the underlying object is not an array, by some mistakes in the logic, somehow something that is not an array got there?

In anyway, I think it should be simple to solve. Can you try verify?

1 Like
6

Damn…
Info in console was not inaccurate.
In my case “includes” was executed not on Array, but String object (facepalm).
And inside “aurelia-polyfills” there is no such polyfill (only for Array).
So I’ve reused snippet from MDN and imported it via webpack.
Thanks for help :slight_smile:

3 Likes