• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

WebComponents.js & Webpack Polyfilling In Aurelia

Aurelia 1 · July 20, 2016

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']
},

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Petar Kozul
Petar Kozul
5 years ago

Hi Dwayne,

Thanks for the info!

With the Aurelia CLI, I managed to get this polyfill working (in IE9, IE10, etc.) by installing it via npm:

npm install github:webcomponents/webcomponentsjs –save

And then adding this to aurelia.json:

{
“name”: “webcomponents”,
“path”: “../node_modules/webcomponents.js/src”,
“main”: “MutationObserver/MutationObserver”,
“resources”: [
“WeakMap/WeakMap.js”
]
},

Not sure if that’s the best way, but it worked in my project.

Cheers,
Petar

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How To Mock uuid In Jest
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Web 3.0 may have died before it even started
  • Deno Raises $21M - but is anyone using it yet?
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files
  • James on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz