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) 

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.