7

I'm using npm, TypeScript and Webpack.

I can use Expose Loader to expose jQuery globally:

import "expose-loader?$!jquery"
import "expose-loader?jQuery!jquery"

Then I can import bootstrap:

import "bootstrap"

And this allows $, jQuery, and $().popover(a boostrap function in the jQuery namespace) to be visible globally to external js files or the browser console.

However, I can't find a way to expose $.ui in the same manner.

I've tried:

import "jquery-ui" //needs building, from 1.12 on they support importing indivisual modules
import "jquery-ui/ui"
import "jquery-ui-dist/jquery-ui.js"
import "jquery-ui-bundle" //1.12.1 and 1.11.4
import "jqueryui";

All in an effort to get import "jquery-ui-touch-punch" to eventually import without throwing errors...

IronSean
  • 1,520
  • 17
  • 31
  • hmmm.. that's interesting. are you sure bootstrap is actually working? because... if it is, then i'd expect importing jqueryui in the same fashion as boostrap to work. bootstrap, just like jqueryui, has to modify `$` to work. – Kevin B Jan 15 '18 at 22:03
  • I'm positive. I can go into the console without bootstrap imported and type `$().popover` and get undefined, import bootstrap and get the popover function printed out, and then type `$.ui` I get undefined. If I just import the jQuery and jQuery-ui scripts normally with script tags then `$.ui` prints out it's version. ¯\_(ツ)_/¯ – IronSean Jan 15 '18 at 22:06
  • Do any of these answers help? https://stackoverflow.com/questions/35259835/how-to-import-jquery-ui-using-es6-es7-syntax – Kevin B Jan 15 '18 at 22:07
  • Unfortuantely not. The partial component includes in the top answer seem to be the supported approach in the official package, but several combinations haven't instantiated the `$.ui` object which `jquery-ui-touch-punch` calls in it's setup. The other answers are just different packages which I've tried already. doing some `import` vs `require` testing and more older version tests now. `webpack-jquery-ui` which is supposed to be a bundle of both `jquery` and `jquery-ui` also doesn't work. – IronSean Jan 15 '18 at 22:50
  • oddly, without expose loader `$().popover` was available within the scope of my bundle, but jQuery-ui's `$.ui` hasn't been available with any combination. – IronSean Jan 15 '18 at 22:51
  • Testing in a `create-react-app` context, importing `jquery-ui` adds the right property to the jQuery object... hmmm... – IronSean Jan 16 '18 at 14:27

2 Answers2

1

I have this working now this way:

(window as any).$ = require('jquery');
(window as any).jQuery = $;

// use require so the imports aren't hoisted above the global variable assignments.
require('jquery-ui-dist/jquery-ui');
require('imports-loader?this=>window!jquery-ui-touch-punch');

using

"jquery": "3.1.1",
"jquery-ui-dist": "1.12.1",
"jquery-ui-touch-punch": "0.2.3",
IronSean
  • 1,520
  • 17
  • 31
  • 1
    Thank you. This solution works great. I did find, however, that using `import "jquery-ui-dist/jquery-ui"` instead of require works just fine and is not hoisted. Might have something to do with my individual setup though. – Nadav Sep 03 '21 at 08:09
0

Examples above in the question work properly in the context of a create-react-app. But in the context of a .Net application using it on the frontend it wasn't behaving. I'm not sure why, but I did get things working like this:

import $ from "jquery";
var jQuery = $;
(<any> window).$ = (<any>window).jQuery = $;
//use require so the assignments above happen, imports get hoisted
require("jquery-ui") 
require("jquery-ui-touch-punch");
require("bootstrap");

And for jQuery-ui-touch-punch I had to prepend var jQuery = require('jquery'); in the start of the file to make it play nicely with webpack. I forked it and am using a git based npm dependency to handle this.

IronSean
  • 1,520
  • 17
  • 31