Search code examples
aureliapolyfills

How to install polyfill aurelia

I am using aurelia-validation plugin and i want to use their BootstrapFormRenderer when there is an error: https://aurelia.io/docs/plugins/validation#custom-renderers

I really need to make it work on IE 11 and as they say i need to polyfill for making it working.

How can i install the polyfill and use it in aurelia to make it work with IE 11 ? Here is the link for the polyfill: https://github.com/jonathantneal/closest

Solution

  • Based on your comment, I can answer your question based on using the Aurelia CLI with RequireJS as your module loader/bundler.

    The first thing you'll need to do is use NPM to install the polyfill.

     npm install --save element-closest

    After you have done this, you'll need to update your aurelia.json file. This is located in the aurelia_project folder. If you are still working with the same setup as given to you when your ran au new, then there will be two bundles, app-bundle.js and vendor-bundle.js, configured. The vendor-bundle configuration has a prepend property that already has some things configured in it. The prepend section is where you want to put your polyfill, as the module bundler will simply copy/paste the contents of the file with the polyfill in to the beginning of bundle file. It won't wrap it in a module or anything, and thus at run time, the polyfill code will automatically execute, adding the polyfill if it needs to. I would recommend adding the polyfill as the first item in your vendor-bundle prepend section. At the very least, it needs to be placed before require.js in the prepend section. You can see an example below:

        "name": "vendor-bundle.js",
    "prepend": [
      "node_modules/element-closest/element-closest.js",
      "node_modules/bluebird/js/browser/bluebird.core.js",
      {
        "path": "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird-no-long-stacktraces.js",
        "env": "stage & prod"
      },
      {
        "path": "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
        "env": "dev"
      },
      "node_modules/requirejs/require.js"
    ],

    After doing this, and running either au build or au run, this is what the beginning of my scripts/vendor-bundle.js file looks like:

    enter image description here

    Orignal Answer Below:

    It's been a week since you asked the question and there hasn't been an answer. The reason is your question is extremely vague.

    The answer would depend on what module loader/bundler you are using when you build your app. Are you using the Aurelia CLI? If so, are you using RequireJS or Webpack?

    Note that this isn't really an Aurelia question so much as a question regarding whatever bundler you're using. Also, note that, as a last resort, polyfills can simply be loaded using script tags.