Including JQuery Mobile in a Node JS project with Browserify

Question

I'm writing a Node JS application where I need both jQuery UI and jQuery Mobile. I'm using Browserify to pack the modules in a single js file.

I have the following code to include jQuery and jQuery UI in my project.

var jQuery = require('jquery');
require('jquery-ui-browserify'); 

And it works. Problems arise when I try to add jQuery mobile, either with a require:

require('./lib/jquery.mobile-1.4.0.min.js');

or with a script tag

<script src="/lib/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>

I get the same error:

"Uncaught TypeError: Cannot set property 'mobile' of undefined".

I understand that I get this error because jQuery mobile looks for the jQuery object in Window and does not find it, but how to fix it? There is no jQuery mobile module on npm.

Answer 1

Here is a simple runnable demo using browserify-shim and jquery + jquery mobile: https://gist.github.com/mchelen/a8c5649da6bb50816f7e

The most important lines are:

package.json

 "browserify-shim": {
   "jquery": "$",
   "jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:$" ] }
 }, 

entry.js

var $ = require('jquery');
$.mobile = require('jquery-mobile');