dimanche 8 juillet 2018

How do I manually include "@material/drawer" into my component?

I am trying to manually include the @material/drawer npm package into my Ember app. I tried following this guide but I'm running into some weird errors in my Chrome dev console:

Uncaught SyntaxError: Unexpected token *
Uncaught ReferenceError: define is not defined

The first is from the imported node_modules/@material/drawer/index.js file and the second is from my generated shim.

My component code:

import Component from '@ember/component';
import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '@material/drawer';

export default Component.extend({

  init() {
    this._super(...arguments);
    const drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
    document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
  }

});

In my ember-cli-build.js:

  app.import('node_modules/@material/drawer/index.js');
  app.import('vendor/shims/@material/drawer.js');

My generated shim:

(function() {
  function vendorModule() {
    'use strict';

    return {
      'default': self['@material/drawer'],
      __esModule: true,
    };
  }

  define('@material/drawer', [], vendorModule);
})();

What exactly am I doing wrong? It almost seems as though raw ES6 code got imported rather than compiled into my JS build output.




Aucun commentaire:

Enregistrer un commentaire