Import jQueryUI widget

[LukeTOBrien]

I am using jQuery UI, I wish to import UI widgets and be able to use the.
This app that I'm creating is not using any framework, I am coding in TypeScript but that shouldn't make a difference I guess.

I have another app using angular-cli (WebPack) and I can import jQuery and the widgets just fine:

import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/draggable.js';
import 'jquery-ui/ui/widgets/resizable.js';

But when I do the same using Parcel, it just fails, no error in the console

jQueryUI is essential for my app that I am creating, if this cannot be resolve I will have to move to WebPack.

🐛 bug report

Like I sad there are no errors.

If I breakpoint in the parcelRequire method I can see the widgets in the modules parameter:
(copied from debugger tooltip)

"node_modules/jquery-ui/ui/widgets/tooltip.js": (2) […]
0:parcelRequire<["node_modules/jquery-ui/ui/widgets/tooltip.js"]<()
  arguments: null
  caller: null
  length: 3
  name: ""
  prototype: {…}
  <prototype>()
1: {}

It is not loading correctly, I would expect more dependencies.

🎛 Configuration

I don't have a index.html, everything is TypeScript:
(scripts in package.json)

    "dev": "parcel index.ts",
    "build": "parcel build index.ts",

🤔 Expected Behavior

I would expect it to work like WebPack, just import them and go:

import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/draggable.js';
import 'jquery-ui/ui/widgets/resizable.js';

I would also expect an error in the console.

😯 Current Behavior

Not doing that at all.

💁 Possible Solution

I have seen #333 and How do I use jQuery and jQuery-ui with Parcel (bundler)? on SO

I have been experimenting and I have got it working in a way, but still not as I would expect.
I have a ImportJQuery.ts:

import jquery from "jquery";

export default (window['$'] = window['jQuery'] = jquery);

Then I am inporting that, and the widget and all dependencies manually.
Seems the widget I wanted to use requires ul/mouse.js, see jQueryUI download builder - I check the widget I need and it's dependencies;

import "../ImportJQuery"
import "jquery-ui";
import "jquery-ui/ui/data";
import "jquery-ui/ui/plugin";
import "jquery-ui/ui/safe-active-element";
import "jquery-ui/ui/safe-blur";
import "jquery-ui/ui/scroll-parent";
import "jquery-ui/ui/version";
import "jquery-ui/ui/disable-selection";
import "jquery-ui/ui/unique-id";
import "jquery-ui/ui/widgets/mouse";
import "jquery-ui/ui/widgets/tooltip";
import "jquery-ui/ui/widgets/tabs";
import "jquery-ui/ui/widgets/accordion";
import "jquery-ui/ui/widgets/draggable";
//import "jquery-ui/ui/widgets/droppable";
import "jquery-ui/ui/widgets/sortable";

This is really trial and error though. And I haven't got draggable or droppable. Despite importing everything:
(Open up ui/widgets/draggable.js and there is a AMD define):

		define( [
			"jquery",
			"./mouse",
			"../data",
			"../plugin",
			"../safe-active-element",
			"../safe-blur",
			"../scroll-parent",
			"../version",
			"../widget"
		], factory );

🌍 Your Environment

Software	Version(s)
Parcel	1.12.4

[LukeTOBrien]

An update to say that I have found a work around, I noticed that the SO question was using jquery-ui-dist, which is actually a package, I installed that and am using it.
It is not ideal but it works.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.