Using Material Design Lite ripple effect in Ember component

I'm trying to add a Material Design Lite button with ripple effect as a component to my Ember project, but it's not working.

I understand that MDL components need to be upgraded (especially if they're being loaded dynamically with Ember), but it looks like there's something I'm missing with the ripple effect?

Any time I click a button with the ripple effect class I get the following error:

ripple.js:73 Uncaught TypeError: Cannot read property 'style' of null
at MaterialRipple.downHandler_ (ripple.js:73)

And on mouseout I get the following error:

ripple.js:128 Uncaught TypeError: Cannot read property 'classList' of null
    at MaterialRipple.<anonymous> (ripple.js:128)

I'm using a mixin to upgrade all MDL elements, as suggested here:

// mixins/mdl-initialize.js
import Ember from 'ember';
export default Ember.Mixin.create( {
    initializeItems: function () {
        componentHandler.upgradeDom();
    }.on('didInsertElement')
});

Here's my component JS:

// components/mdl-button.js
import Ember from 'ember';
import mdlInit from '../mixins/mdl-initialize';
export default Ember.Component.extend(mdlInit, {
    tagName: 'button',
    classNames: ['mdl-button', 'mdl-js-button', 'mdl-button--raised', 'mdl-js-ripple-effect']
});

If it helps, I'm adding my MDL JS files in my ember-cli-build file in the following order:

app.import('vendor/js/mdlComponentHandler.js');
app.import('vendor/js/third_party/rAF.js');
app.import('vendor/js/ripple.js');

Any ideas on what might be happening here?

Also, I know there's already an add-on for MDL in Ember, but I'd like to do this manually, if possible.