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

Question

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.

I also read this SO post but there are too many answers and I'm not sure which to do. It seems this specific answer is what I'm trying to do but not verbatim enough.

Answer 1

Creating a shim only ensures that ember-cli gets an AMD module, which you then can import in your app files. If the npm package needs a build or transpiling step beforhand, this won't work.

You need a way to get the package build within the ember-cli build pipeline. Luckily there are addons which can take care of this for you: ember-auto-import and ember-cli-cjs-transform .

You may have also heard of ember-browserify , which does the same thing, but it's deprectaed in favor of ember-auto-import .

I'd suggest you try ember-auto-import :

ember install ember-auto-import

You then should be able to import as you tried:

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

No shim or app.import needed, as ember-auto-import will take care of this for you.