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

Question

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.

Comments

[okram]

I tried both ways and both worked, thanks a lot! Btw, is there any common name this multiple assignment (window.$ = window.jQuery = jquery) is called so I can read a bit about it? Seems to me like good side effect of this answer:)

[Marouane Fazouane]

@okram look for « chained assignments javascript ». There’s a small paragraph on this on mdn.

[Luis E.]

I can say that as of today still, Parcel still does not fully support these module-induced globals.