This is a migrated thread and some comments may be shown as answers.

How to use jQuery plus plugins and dependent libraries with Webpack

2 Answers 188 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Travis
Top achievements
Rank 1
Travis asked on 17 Feb 2017, 06:07 PM
I am trying to understand how to port an existing set of code to Webpack. Here's my scenario:

I'm using jQuery with Bootstrap, KendoUI, Mockjax, some jQuery plugin-ish libraries (e.g. bootbox, jQuery BlockUI). Previously (using requireJS), I was able to specify these dependencies in an array in the 'require' of my main app js, and everything was tied together nicely. Like this:

    require(['dep1','dep2','...'],function(Dep1,Dep2,...) {do stuff});

Using Webpack I've encountered a number of problems:

- When I turn on the 'chunking' feature, my mock endpoints no longer
   work
   
- In one case, Webpack is creating a '0.js' file and I have no idea
   why, nor how to prevent it from doing so.
   
- In various cases it appears there are two (?) copies of jQuery, such
   that handlers or references to Kendo widgets don't work anymore
   
- When I tried to convert some wrapper code from an AMD style (with a
   'require' array followed by a function with formal params), I got
   numerous errors, such as Bootstrap not finding jQuery or everything
   appearing to load except none of the jQuery event listeners were
   working.

I've read a bunch of articles, and tried things like:

- using the `webpack.ProvidePlugin` in my Webpack config

- putting an 'alias' to the unminified jQuery in the `resolve` object of my Webpack config

- using the `imports-loader?jQuery=jquery,$=jquery,this=>window` approach in my `module: { loaders: {}}` Webpack config object

- using the `imports-loader` approach in my main js in the `require` 

So far, nothing has worked completely. I've gotten close, only to find (for example) that suddenly a Kendo widget doesn't seem to exist under the jQuery selection it previously was working under.

##Summary: 

I'd like to understand how to make a bulletproof setup so that one and only one instance of jQuery exists, and everything that has jQuery as a dependency/relationship uses that instance everywhere in my code. Further, I'd like to understand how such a thing can be accomplished while using the 'chunking' feature of Webpack. If I separate my Mockjax endpoints (for example) into a separate file, I want them to function for any AJAX call anywhere, be it via Kendo or jQuery. If I define a Kendo widget (say, a dropdown) somewhere, I want to be able to get a handle to it from anywhere using the `$('.some-kendo-widget').data('kendoDropDownList)` approach.

I'm happy to read more articles if someone has links; I've searched and searched, and just don't seem to have the right vocabulary to find what I need. Surely someone else has faced this though.

2 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 21 Feb 2017, 10:55 AM
Hi,

The scenario you are trying to achieve is rather a web pack issue than a kendo ui issue. In such cases in order to achieve the most appropriate answer I would rather recommend you to refer to some webpack specific forums regarding a possible solution.

Regards,
Plamen
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Travis
Top achievements
Rank 1
answered on 22 Feb 2017, 12:00 AM
Thanks Plamen. I understand it's not a Kendo issue per se; I was hoping that others may have already solved this in a common way when using Kendo (particularly the NPM version), and these forums seemed like a good way to reach such folks.
Tags
General Discussions
Asked by
Travis
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Travis
Top achievements
Rank 1
Share this question
or