jQuery dependency cause double require of module using webpack

[mrsombre]

We are using webpack for building JS and bootstrap 3 (which has not support jquery 3 yet). In this case, tablesorter dependency install separate jquery 3 and using it in webpack, instead of main jquery 2 and we can not use tablesorter from global scope.

Consider change dependency to "jquery": "^2.4 | ^3.2" from "jquery": ">=3.2.1" to fix this issue.

[MartinMuzatko]

I also have trouble using this with webpack.

I have to manually assign $.fn.tablesorter = require('tablesorter'). But this does not work :/ @Mottie

[mrsombre]

@MartinMuzatko i downgraded to 2.28.8, because can't for 2.28.9 for some reason.
npm i tablesorter@2.28.8 or in packaje.json "tablesorter": "2.28.8"

[Mottie]

Hi @mrsombre!

Bootstrap 3.3.7 supports jQuery 3.0+ so a change to the dependency shouldn't be necessary. It looks like I forgot to publish v2.28.9 to npm. The current version is 2.28.12.

@MartinMuzatko

Did you use npm install tablesorter? Also you should be using const tablesorter = require('tablesorter'); and not assigning it to a jQuery function. It does that internally.

[MartinMuzatko]

Thank you for the feedback @Mottie.
When I include the script via script tag, there are no problems. Even though jquery is exposed via webpack.

{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$'},

But when I import 'tablesorter', it is not added to the jquery scope ($.fn.tablesorter or $.tablesorter.

[Mottie]

I'm not sure what might be missing, but check out this StackOverflow answer: https://stackoverflow.com/a/28989476/145346

The way I found works is something like this:

module.exports = {
  entry: [
    'script!jquery/dist/jquery.min.js',
    'script!tablesorter/dist/js/jquery.tablesorter.min.js'
  ],
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery'
    })
  ],
  // ...
}

[mrsombre]

@Mottie we using jquery 2.4 for some reasons, i don't know, maybe our frontend guys knows, BTW what the problem with or in dependency. I'm explain how it works

Example webpack code

// jquery
window.jQuery = window.$ = require("jquery");
require("tablesorter");

Last version tablesorter with jquery 3 dependency
in my bundle.js

// jquery
window.jQuery = window.$ = __webpack_require__(0);
...
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
(function(factory) {
	if (true) {
		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3)]
...

Old version tablesorter with jquery >1 dependency

// jquery
window.jQuery = window.$ = __webpack_require__(0);
...
/* Includes widgets ( storage,uitheme,columns,filter,stickyHeaders,resizable,saveSort ) */
(function(factory) {
	if (true) {
		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(0)]
...

Also, there are double jquery in my bundle.js and in this case tablesorted has not exposed to global scope, so i can't use it at site pages, only in my bundle.js

[Mottie]

@mrsombre so to solve this all I'd need to do is to set the jQuery dependency to "^2.4|^3.2"?

[mrsombre]

@Mottie i think so, would be great

[Herst]

Never heard of jQuery 2.4, WP does not know it either: https://en.wikipedia.org/wiki/JQuery#Release_history

I guess you mean 2.2.4 (latest before 3).

[Mottie]

Actually, I'm going to change it back to ">=1.2.6" because that would allow pretty much any jQuery version.

[Mottie]

This fix will be available with the next release, which will be likely be tomorrow.