Issues with jQuery Mobile, NPM, and WebPack

I've spent a while researching this and experimenting, and I'm sure I could hack something together to get it working but I'd rather understand what I'm doing wrong.

It's well known that jQuery Mobile hates playing nicely.

Yet everywhere I look, the culprit is the same: jQuery Mobile has an IIFE which looks something like:

(function($, window){
  // code
})(jQuery, this)

When loaded in Node (instead of a browser), this is set incorrectly and it fails to bind the module

My Issue Is Different

I installed jQuery Mobile like so:

npm install --save-dev jquery-mobile

I then tried including it in my JavaScript like so:

window.$ = window.jQuery = require('jquery');
$.mobile = require('jquery-mobile');

This threw the error:

Module not found: Error: Can't resolve 'load-grunt-config' in '/home/sbarnett/test/node_modules/jquery-mobile'

Note: This has nothing to do with $ being undefined, or anything being wrong with the this context. It literally didn't even try to load jquery-mobile before looking for Grunt... for some reason?

From what I can tell, researching online and just having a basic understanding of NPM and how modules are generally laid out, there should be a "dist" folder inside of ./node_modules/jquery-mobile. There is no such folder.

It almost looks like I got the source code for jQuery Mobile instead of the compiled version. I'm used to finding a minified javascript file in the "dist" folder, and there's no such thing here.

Based on what I'm seeing and the errors I'm getting, I tried going to the jQuery Mobile directory and running grunt. Of course I know this is bad practice, because you should never touch your node_modules folder. At any point in time it should be safe to rm -rf node_modules and npm install to get it back.

Despite the existence of a Gruntfile.js I got the following error:

Fatal error: Unable to find local grunt.

So I have a non-built version of jQuery Mobile being installed by NPM and I'm unable to build it.

After another day I came back to this and doing some snooping I found the issue.

When I ran:

npm install --save-dev jquery-mobile

NPM defaulted to installing 1.5.0-alpha.1

This version is still in alpha, so it isn't built by default. As it appeared, I was receiving un-built source code with no dist folder.

There's a second issue, though. Updating my package.json to:

// ...
  "jquery-mobile": "^1.4.0",
// ...

I started getting new errors, but jQuery Mobile doesn't support jQuery 3.0 (which is installed by default upon running npm install --save-dev jquery). So I had to roll back my version of jQuery in the package.json, as well

Then there was a third issue: the common issue that everyone has experienced. Webpack and Browserify build jQuery Mobile improperly because of a poorly written IIFE. This can be solved by using jquery-mobile-babel-compatible or using imports-loader, per this StackOverflow post

Alternatively if you must use jQuery 3 and want to use jQuery Mobile 1.5 alpha, you can download the minified version directly from their website and include it in your app's javascript folder (instead of using NPM to manage it).