jScrollPane loads its own jQuery when used in webpack

[paul-bjorkstrand]

Recently, I was moving some code from a legacy static files to webpack, and I noticed something curious:

When using webpack to import jScrollPane, I wasn't seeing it in $.fn as an instance function. After some digging, I saw that the jquery version that it was being attached to was 3.6.0, when the version in the project was different. Of the three jquery plugins we had, 2 were working, this one was not. The difference was intriguing. Below is my findings and some additional details on potential fixes.

---

In jquery-match-height, it was working as expected. The only difference that I can tell is that there is no dependency on jQuery in package.json. My guess is that plugin had the same problem, and just solved it by removing the dependency.

In jquery-mousewheel, it is doing something different. If you see in jquery.mousewheel.js, for CommonJS modules, it is not calling the factory, it is just exposing it in the exports, which means you call the factory in your code, like below (which works perfectly):

import $ from  'jquery';
import jqueryMousewheel from 'jquery-mousewheel';

jqueryMousewheel($);

To do it canonically (at least NPM canonical), it might be better to make jquery a peerDependency. This would have the benefit that your existing users don't have to change anything other than ensure that they have jquery added as a dependency in their projects (which they almost certainly do already).

To take it to the next level, you could do the same for your other dependency, jquery-mousewheel (funny, since I mentioned it above).

Either way you decide to fix it (peer dependency or do it like jquery-mousewheel) would make it a whole lot easier to use in webpack for migrating projects.