Uncaught (ตามสัญญา) TypeError: $ ไม่ใช่ฟังก์ชัน

ฉันกำลังพยายามแสดงปุ่มที่มีระลอกคลื่นโดยใช้ Material Design Lite แต่ได้รับข้อผิดพลาดต่อไปนี้:

app.js:3 Uncaught (ตามสัญญา) TypeError: $ ไม่ใช่ฟังก์ชัน(…)

ไฟล์ html:

  <body>
      <script>
System.paths['jquery'] = './node_modules/jquery/dist/jquery.js';
              System.import('src/app.js');
</script> 
  </body>

แอพ js:

      import $ from 'jquery';
import {Button} from './ui/button.js';
let b=new Button('click me');
b.appendToElement($('body'));

ปุ่ม.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>
        `;
    }

}

ฐาน 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';
    }
}

javascript material-design jquery ecmascript-6 traceur
person YaSh Chaudhary    schedule 29.11.2016    source แหล่งที่มา
comment
มันอธิบายว่า jquery ของคุณไม่ได้ถูกนำเข้าในไฟล์ของคุณ   -  person Sanjay    schedule 29.11.2016
comment
@SanjayPatel ไวยากรณ์ของฉันผิดหรือเปล่า?   -  person YaSh Chaudhary    schedule 29.11.2016
comment
คุณจะได้อะไรเมื่อคุณ console.log($)?   -  person Michał Perłakowski    schedule 29.11.2016
comment
@Gothdo ข้อผิดพลาดเดียวกัน   -  person YaSh Chaudhary    schedule 29.11.2016
comment
@YaShChaudhary ลบโค้ดทั้งหมดออกจาก app.js และเหลือเพียง import $ from 'jquery'; console.log($);   -  person Michał Perłakowski    schedule 29.11.2016
comment
@Gothdo ไม่ได้กำหนด   -  person YaSh Chaudhary    schedule 29.11.2016
comment
ลอง import 'jquery' ไหม   -  person sdgluck    schedule 29.11.2016
comment
@sdgluck ว้าว มันได้ผล .tnx เยอะมาก!   -  person YaSh Chaudhary    schedule 29.11.2016

คำตอบ (1)


arrow_upward
2
arrow_downward

เนื่องจาก jQuery แนบตัวเองเข้ากับวัตถุส่วนกลาง คุณควรใช้ import 'jquery'

การใช้ import $ from 'jquery' shadows $ บนอ็อบเจ็กต์โกลบอลด้วยการส่งออกเริ่มต้นที่ 'jquery' แต่ jQuery จะไม่ส่งออกอะไรเลย ดังนั้น $ === undefined

person sdgluck    schedule 29.11.2016