title: "TypeError: undefined is not a function" when requiring jQuery-ui in node.js using Express
body: <p>I am trying to set up a small <code>node.js</code> webserver which will use <code>jQuery</code> and <code>jQuery-ui</code>. I have used <code>Express</code> to set up a small project and then installed all packages I need using <code>npm &lt;package-name&gt; install --save</code>. 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).</p>
  
  <p><code>Express</code> has set up the project like this:</p>
  
  <pre><code>$ ls
  app.js  bin  node_modules  npm-debug.log  package.json  public  routes  views
  </code></pre>
  
  <p>The folder <code>node_modules</code> now contain:</p>
  
  <pre><code>$ ls node_modules
  body-parser  cookie-parser  debug  express  jade  jquery  jquery-ui  morgan  serve-favicon
  </code></pre>
  
  <p>My <code>app.js</code> file is as set up by <code>Express</code> except that I now include <code>jQuery</code> and <code>jQuery-ui</code>, like this:</p>
  
  <pre><code>$ 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.
  </code></pre>
  
  <p>Running <code>node bin/www</code> now shows the error</p>
  
  <pre><code>/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.&lt;anonymous&gt; (/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.&lt;anonymous&gt; (/home/oystein/QAWebApp3/app.js:8:16)
      at Module._compile (module.js:460:26)
  </code></pre>
  
  <p>This error seems to originate from the file jquery-ui.js, which looks like this:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>My guess is some inclusion problems. The error kicks in at line 15, <code>$.extend( $.ui, {</code>, but the message tells me to look at the line <code>(function( $, undefined ) {</code>. What is the best way to solve this?</p>
  
  <p>Oh, and <code>package.json</code> looks like this:</p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>