• 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
6 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

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)
  • How To Paginate An Array In Javascript
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz