26

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)
Andrew Stegmaier
  • 3,429
  • 2
  • 14
  • 26
okram
  • 810
  • 3
  • 11
  • 17

1 Answers1

49

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.

Marouane Fazouane
  • 1,279
  • 14
  • 20
  • 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:) – okram Dec 27 '17 at 20:17
  • @okram look for « chained assignments javascript ». There’s a small paragraph on this on mdn. – Marouane Fazouane Dec 28 '17 at 22:59
  • 4
    I can say that as of today still, Parcel still does not fully support these module-induced globals. – Luis E. May 14 '20 at 20:37