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.
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.
Share Improve this question edited Aug 18, 2015 at 22:38 Jonathan Hall 79.8k19 gold badges159 silver badges203 bronze badges asked Jan 29, 2014 at 10:58 Gian Luca ScocciaGian Luca Scoccia 7251 gold badge9 silver badges29 bronze badges4 Answers
Reset to default 4Here is a simple runnable demo using browserify-shim and jquery + jquery mobile: https://gist.github./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');
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./thlorenz/browserify-shim if you do not like the grunt approach
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/'));
});
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>