[英]Uncaught (in promise) TypeError: $ is not a function
I am trying to display a button with ripple using material design lite but getting the following error: 我正在尝试使用材质设计精简版显示一个带有波纹的按钮但是出现以下错误:
app.js:3 Uncaught (in promise) TypeError: $ is not a function(…)
app.js:3未捕获(在承诺中)TypeError:$不是函数(...)
html file: html文件:
<body>
<script>
System.paths['jquery'] = './node_modules/jquery/dist/jquery.js';
System.import('src/app.js');
</script>
</body>
app.js: app.js:
import $ from 'jquery';
import {Button} from './ui/button.js';
let b=new Button('click me');
b.appendToElement($('body'));
button.js : button.js:
import {BaseElement} from './base-element.js';
export class Button extends BaseElement {
constructor(title) {
super();
this.title = title;
}
getElementString() {
return `
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
style="">
${this.title}
</button>
`;
}
}
base-element.js: 基element.js:
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';
}
}
As jQuery attaches itself to the global object you should use import 'jquery'
. 当jQuery将自己附加到全局对象时,您应该使用
import 'jquery'
。
Using import $ from 'jquery'
shadows $
on the global object with the default export of 'jquery'
, but jQuery doesn't export anything, so $ === undefined
. 使用
import $ from 'jquery'
阴影$
与默认出口全球对象'jquery'
,但jQuery的不出口任何东西,所以$ === undefined
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.