title: Uncaught (in promise) TypeError: $ is not a function
body: <p>I am trying to display a button with ripple using material design lite but getting the following error:</p>
  
  <blockquote>
    <p>app.js:3 Uncaught (in promise) TypeError: $ is not a function(…)</p>
  </blockquote>
  
  <p>html file:</p>
  
  <pre><code>  &lt;body&gt;
        &lt;script&gt;
  System.paths['jquery'] = './node_modules/jquery/dist/jquery.js';
                System.import('src/app.js');
  &lt;/script&gt; 
    &lt;/body&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>      import $ from 'jquery';
  import {Button} from './ui/button.js';
  let b=new Button('click me');
  b.appendToElement($('body'));
  </code></pre>
  
  <p>button.js :</p>
  
  <pre><code>      import {BaseElement} from './base-element.js';
  
  export class Button extends BaseElement {
  
      constructor(title) {
          super();
          this.title = title;
  }
  
      getElementString() {
          return `
              &lt;button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
                  style=""&gt;
                  ${this.title}
              &lt;/button&gt;
          `;
      }
  
  }
  </code></pre>
  
  <p>base-element.js:</p>
  
  <pre><code>    import $ from 'jquery';
  
  export class BaseElement {
  
      constructor() {
          this.element = null;  // jQuery object
      }
  
      appendToElement(el) {
          this.createElement();
          el.append(this.element);
  }
  
      createElement() {
          let s = this.getElementString();
          this.element = $(s);
      }
  
      getElementString() {
          throw 'Please override getElementString() in BaseElement';
      }
  }
  </code></pre>