How to import jquery ui touch punch in Angular 2 Webpack app?

Question

I have jQuery range slider widget that I import and use like this:

declare var jQuery: any;

import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';

and use it like this:

jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..});

My slider works fine.

The problem is that I need mobile touch enabled slider, so I imported jQuery UI Touch Punch:

declare var jQuery: any;

import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';
import 'jquery-ui-touch-punch';

but it errors with:

TypeError: Cannot read property 'prototype' of undefined

Obviously it can't find jQuery and jQuery UI. But how do I pass jQuery to touch punch when imported jQuery is not on global scope?

I use this boilerplate for my project.

Any luck with this? I'm struggling with this one right now... — Richard Houltz, Apr 06 '17 at 04:46
Unfortunately not, I ended up using http://ionden.com/a/plugins/ion.rangeslider/ instead which supports mobile touch events. — Chyngyz, Apr 10 '17 at 08:14

score 5 · Accepted Answer · answered Sep 02 '17 at 20:00

5

This worked for me (sortable instead of slider but the same idea):

import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/sortable';

(window as any).jQuery = $;
require('jquery-ui-touch-punch');

The require instead of import at the end is important. If you use an import the code that sets the jQuery global on window won't run until after the touch punch import since imports are run before everything else.

answered Sep 02 '17 at 20:00

Will

2,790
19
22

This approach seemed to have worked for me trying to implement draggable elements for FullCalendar in a webpack VueJS project without globally importing jquery – John Mar 18 '18 at 11:04

How to import jquery ui touch punch in Angular 2 Webpack app?

1 Answers1