WebComponents.js & Webpack Polyfilling In Aurelia

If you are developing an Aurelia application, just so happen to be using Webpack and need to support Internet Explorer 10, then you will probably want the MutationObserver polyfill.

The polyfill is installed via the Github repository, so you need to make sure that you only install a release version which has the individual polyfill scripts for different Web Component features. At the time of publishing this was version 0.7.22.

npm install git://github.com/webcomponents/webcomponentsjs#v0.7.22 --save

If you were to just install it from the master branch, you wouldn’t get the built scripts. So keep this in mind if you run into trouble. I couldn’t get the master branch version to work with Webpack and my Aurelia application.

The Aurelia Webpack skeleton and presumably when the CLI supports Webpack contains an index.js file in the root outside of the src directory which contains some logic already for setting up Bluebird promises and including base styles (like Bootstrap).

At the top of this file we want to import the MutationObserver polyfill like so (before anything else):

import 'webcomponents.js/MutationObserver.js';

Now when the application is built, the MutationObserver polyfill is included in our resulting application bundle and you can sleep soundly at night.

Don’t have an index.js file or not using Aurelia?

You can still use the MutationObserver polyfill if you don’t have an index.js file or perhaps not even using Aurelia at all. In your Webpack configuration file webpack.config.js or whatever you called it, in the entry section we add it here.

So before you might have something like this:

entry: {
    'app': ['./src/main']
},

And afterwards, you would have something like this:

entry: {
    'app': ['webcomponents.js/MutationObserver.js', './src/main']
},