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.$ = requi         


        

Answer 1

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.