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 it 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.

via stevendesu