Uncaught (in promise) TypeError: $ is not a function
<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>