Search code examples
jqueryjquery-uiparceljs

How do I use jQuery and jQuery-ui with Parcel (bundler)?


I installed jquery(3.2.1) and jquery-ui-dist(1.12.1) via npm. (they're not included as script tags in html)

In client script I use:

window.$ = require('jquery');// plain jQuery stuff works fine
import 'jquery-ui-dist';     // breaks whole jQuery, with Error (missing module 8)

Solution

  • I encountered similar issues today with an angularjs app & parcel-bundler. It seems that parcel doesn't handle well (for now?) global variables introduced in external modules. Amongst other issues.

    One way to go about it; you can use plain requires instead of imports like so:

    var jquery = require("jquery");
    window.$ = window.jQuery = jquery; // notice the definition of global variables here
    require("jquery-ui-dist/jquery-ui.js");
    
    $(function() {
      $("#datepicker").datepicker();
    });
    

    If you insist on using imports, you should create a separate file, call it for example import-jquery.js with the following content:

    import jquery from "jquery";
    
    export default (window.$ = window.jQuery = jquery);
    

    and import it in your main file:

    import "./import-jquery";
    import "jquery-ui-dist/jquery-ui.js";
    
    $(function() {
      $("#datepicker").datepicker();
    });
    

    I do hope we'll have better support of this in the near future.