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.

Is it actually supported to `app.import()` code that needs transpiling? (i.e. ES6 code). I've only ever used to to import bog standard ES5 code, which then makes itself available globally. The NPM module you're trying to use likely has a build step to transpile it to a single ES3/5 file (the build output for it may actually already be in the repo). Try importing that file instead of an ES6 file - you then wouldn't need an `import`in your component. Still, vendoring an ES6 NPM module is an interesting question, not sure how to do that off the top of my head. Could ask on the Community Slack. — Richard Viney, Jul 09 '18 at 04:20

Enno · Answer 1 · 2018-07-11T14:10:56.320

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.

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

1 Answers1