I am trying to set up a small node.js webserver which will use jQuery and jQuery-ui. I have used Express to set up a small project and then installed all packages I need using npm <package-name> install --save. Please bear in mind that I am new to the JavaScript world, so I might be doing silly things, but I could not find anyone with the same issue (just related).
Express has set up the project like this:
$ ls
app.js bin node_modules npm-debug.log package.json public routes views
The folder node_modules now contain:
$ ls node_modules
body-parser cookie-parser debug express jade jquery jquery-ui morgan serve-favicon
My app.js file is as set up by Express except that I now include jQuery and jQuery-ui, like this:
$ cat app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var jQuery = require('jquery');
var jQueryUi = require('jquery-ui');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// The rest is omitted here for brevity. Default settings from Express.
Running node bin/www now shows the error
/home/oystein/QAWebApp3/node_modules/jquery-ui/jquery-ui.js:15
$.extend( $.ui, {
^
TypeError: undefined is not a function
at /home/oystein/QAWebApp3/node_modules/jquery-ui/jquery-ui.js:15:3
at Object.<anonymous> (/home/oystein/QAWebApp3/node_modules/jquery-ui/jquery-ui.js:316:3)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/home/oystein/QAWebApp3/app.js:8:16)
at Module._compile (module.js:460:26)
This error seems to originate from the file jquery-ui.js, which looks like this:
var jQuery = require('jquery');
/*! jQuery UI - v1.10.3 - 2013-05-03
* http://jqueryui.com
* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js, jquery.ui.effect.js, jquery.ui.accordion.js, jquery.ui.autocomplete.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.effect-blind.js, jquery.ui.effect-bounce.js, jquery.ui.effect-clip.js, jquery.ui.effect-drop.js, jquery.ui.effect-explode.js, jquery.ui.effect-fade.js, jquery.ui.effect-fold.js, jquery.ui.effect-highlight.js, jquery.ui.effect-pulsate.js, jquery.ui.effect-scale.js, jquery.ui.effect-shake.js, jquery.ui.effect-slide.js, jquery.ui.effect-transfer.js, jquery.ui.menu.js, jquery.ui.position.js, jquery.ui.progressbar.js, jquery.ui.slider.js, jquery.ui.spinner.js, jquery.ui.tabs.js, jquery.ui.tooltip.js
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */
(function( $, undefined ) {
var uuid = 0,
runiqueId = /^ui-id-\d+$/;
// $.ui might exist from components with no dependencies, e.g., $.ui.position
$.ui = $.ui || {};
$.extend( $.ui, {
version: "1.10.3",
keyCode: {
BACKSPACE: 8,
COMMA: 188,
DELETE: 46,
DOWN: 40,
// Lots of other defines...
})( jQuery ); // End of block on line 316
My guess is some inclusion problems. The error kicks in at line 15, $.extend( $.ui, {, but the message tells me to look at the line (function( $, undefined ) {. What is the best way to solve this?
Oh, and package.json looks like this:
{
"name": "QAWebApp3",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "^1.12.3",
"cookie-parser": "^1.3.4",
"debug": "^2.1.3",
"express": "^4.12.3",
"jade": "^1.9.2",
"jquery": "^2.1.3",
"jquery-ui": "^1.10.5",
"morgan": "^1.5.2",
"serve-favicon": "^2.2.0"
}
}
npmandrequireto be available for browserify or other CommonJS-to-browser environments.<script>tags. I'm not too familiar with Express but I'm sure it has a static file server too.