Problems loading Jquery-UI with Steal.js and CanJS

StealJS
1

Hi, I’ve been encountering some issues when trying to use Jquery UI with CanJS and StealJS and was wondering what I’m doing wrong here. I get reference errors for Jquery, even though I’ve described its location in the system/paths property of my package.json.

Here’s what I’ve done:

I’ve installed can and steal through npm with the npm install --save can steal command. I’ve installed jquery-ui through bower using the bower install jquery-ui command, which put it in a root-level bower_components directory.

Here are my node modules and bower directories:

$ tree -L 1 node_modules bower_components

node_modules
├── can
└── steal
bower_components
├── jquery
└── jquery-ui

I have an app.js file that looks like this:

steal('can','jquery','jquery-ui',function(can, $, jqui) { 

    console.log(can, $, jqui);

});

and an index.html file with a script tag at the bottom of the body that looks like this:

<script src="node_modules/steal/steal.js"></script>

In my package.json file, I’ve added meta and path information to the system property as shown below:

{
  "name": "demo",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "can": "^2.3.26",
    "steal": "^0.16.35"
  },
  "system": {
    "meta": {
      "jquery": {
        "format": "global"
      },
      "jquery-ui": {
        "deps": [
          "jquery"
        ]
      }
    },
    "paths": {
      "jquery": "node_modules/can/dist/can.jquery.js",
      "jquery-ui": "bower_components/jquery-ui/jquery-ui.js"
    }
  }
}

The errors I am currently gettting are:

Any idea where I’m going wrong? Thanks!

2

can.jquery.js is not jquery itself. this file does not contain jQuery. it is a layer for canjs.
see https://canjs.com/guides/Using.html

3

Thanks so much, got it working now. Much appreciated!