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.

Mike Chelen · Accepted Answer · 2015-06-27T17:08:11.893

4

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');

edited Jun 27 '15 at 17:08

answered Nov 24 '14 at 23:17

Mike Chelen

402
4
9

I tried this but it's not working for me with jQuery mobile 1.4.5. There is a reference to `this` which returns `Object {}`. Not sure why it is no referencing `window`. – Glitches Mar 11 '15 at 06:31
I tried for few hours to make this work too. I don't understand that part in packadge.json "browser" where it hardcodes a path to jquery and jquery-mobile. Isn't that supposed to be "known" by browserify? Why a require('jquery') works and require('jquery-mobile') throughs me a "Cannot find module 'jquery-mobile'? – Guillaume Bois Mar 19 '15 at 18:43
Ok I was finally able to figure this out. Indeed you don't need to specify a path to jquery but you need to specify a path for jquery-mobile. I prepared a paste for SO: http://codepen.io/Reblutus/pen/dPwVKz (un tested). I also entered an answer... – Guillaume Bois Mar 20 '15 at 12:22

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

You must use a browserify shim.

You could use grunt-browserify to run your requires before page load.

Then you can simply use a shim to export '$' and require jQuery in JQuery.mobile like its done here with another plugin :

Shim a jQuery plugin with browserify

You could also use https://github.com/thlorenz/browserify-shim if you do not like the grunt approach

edited May 23 '17 at 11:45

Community

1
1

answered Mar 19 '14 at 13:32

Rayjax

7,494
11
56
82

score 1 · Answer 3 · answered Mar 20 '15 at 12:41

You need to specify the path to jquery-mobile.

In packadge.json

"devDependencies": {
    "gulp": "3.8.7",
    "browserify": "9.0.3",
    "browserify-shim": "3.8.3",
    // [...] many more hidden
    "jquery": "1.11.0",
    "jquery-mobile": "1.4.1"
},
"browser": {
    "jquery-mobile": "./node_modules/jquery-mobile/dist/jquery.mobile.js"
},
"browserify": {
    "transform": [ "browserify-shim" ]
},
"browserify-shim": {
    "jquery": "$",
    "jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:$" ] },
    "three": "global:THREE"
}

in you js file:

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

You can see more of this here

I am also using gulp. In gulpfile.js:

gulp.task('browserify', ['jshint'], function () {
    return browserify('./src/js/app.js')
    .bundle()
    .pipe(source('myjs.js'))
    .pipe(gulp.dest('./js/'));
});

score 0 · Answer 4 · answered Feb 18 '14 at 07:30

I've got the same problem.

right now i'm using browerify for all except jquery and jquery-mobile and i add script tags for jquery and jquery-mobile to the header, and script tag of the bundle at the bottom of the body (so, require("../jquery") and require("../jquery-mobile") are no more necessary). Bad solution, but it works

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link href="js/vendors/jquery.mobile-1.4.0.min.css" rel="stylesheet">
  <script src="js/vendors/jquery-1.10.2.min.js"></script>
  <script src="js/vendors/jquery.mobile-1.4.0.min.js"></script>
</head>

<body>
  <div class="Application">
  </div>
  <script src="js/app.built.js"></script>
</body>
</html>

Including JQuery Mobile in a Node JS project with Browserify

4 Answers4

Linked