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...

Improve this question
6
  • 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. Commented Jan 15, 2018 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. ¯_(ツ)_/¯ Commented Jan 15, 2018 at 22:06
  • Do any of these answers help? stackoverflow.com/questions/35259835/… Commented Jan 15, 2018 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. Commented Jan 15, 2018 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. Commented Jan 15, 2018 at 22:51

2 Answers 2

Reset to default
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",
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.