3

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"
  }
}
3
  • Is there a reason you try to use jQuery on server side? I haven't seen it used that way before, and would guess it uses npm and require to be available for browserify or other CommonJS-to-browser environments. Commented Apr 23, 2015 at 9:59
  • Well, I want to create a small webpage to access and alter a database on the server. This should include a bit of UI, dropdowns, tabs, etc. to insert and delete data. Is this not the proper way to set things up? Again, I am new to this world, so this setup might not even be feasible. Commented Apr 23, 2015 at 10:02
  • 1
    In that case you should serve jQuery and jQuery-ui as static files and include them in your HTML with <script> tags. I'm not too familiar with Express but I'm sure it has a static file server too. Commented Apr 23, 2015 at 10:05

2 Answers 2

1

To be used on the client, jQuery and jQuery-UI files should be served as static files on the server, and Express has a static middleware for that which you could use to define a directory to look for static files in. More here.

These files could be downloaded from jQuery site or managed with client package manager like Bower, since it appears jQuery-UI from npm is using require which is not supported on browsers.

You could also use hosted jQuery files so you would not need to have it on the server.

Then a <script> tag should be added to your html (or Jade) files to load and use them.

Sign up to request clarification or add additional context in comments.

Comments

1

jQuery and jQuery-UI are meant to be used in the front-end and are not expected to work with Node without the DOM. If you want to use any of the helper jQuery functions you could use underscore.js which contains similar functionality.

If you want to create some HTML UI to be return by your express server, then both libraries (jQuery and jQuery-UI) should be defined/included (using the tag) within your template files (jade files).

Hope this helps

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.