require.js with jquery ui, not finding jquery

Question

Using Require.js to load jquery-ui is giving me problems - jquery-ui's dependencies don't see m to be working. Here is the error:

Uncaught TypeError: Cannot read property 'ui' of undefined

Here are the two files:

main.js

 require.config({
     baseUrl: '/git-cake-skeleton/js',
     paths: {
         'jquery': 'lib/jquery-1.10.2',
         'jqueryui': 'lib/jquery-ui-1.10.3.min',
         'bootstrap': 'lib/bootstrap.min'
     },

     shim: {  
         'jqueryui': {
             exports: '$',
             deps: ['jquery']
         },
         'bootstrap': {
             deps: ['jquery']
         }
     } });

 require([
     'jquery',
     'widgets/demowidget'    
     ], function ($) {
         $(document).ready(function() {

             // This is where we bind our widgets to stuff on the page. All the real logic happens inside widgets!
             $(".app-js-demowidget").demowidget();

         });
     } );

demowidget.js

// Example of simple plugin inside Require.js framework
define(['jquery', 'jqueryui'], function ($) {
$.widget('skeleton.demowidget', {
    options: {
    },
    _init: function() {
        this.element.click(function(e){
            alert('Hello world');
        });
    }
});
});

File structure:

|-js
|   main.js 
|---lib
|      bootstrap.min.js
|      jquery-1.10.2.js
|      jquery-ui-1.10.3.min.js
|      require.js
|---widgets
|      demowidget.js

edit: as expected, switching 'jqueryui' with 'bootstrap' in demowidget.js gives the following error:

Bootstrap requires jQuery

I think exports: '$' might be breaking jQuery? I'm fairly sure it usually works for me without the exports bit. — Mathijs Flietstra
– Mathijs Flietstra, Commented Sep 13, 2013 at 14:34
Although this is a solid point, it is moot and not the root cause - bootstrap, which has no export in the above code, gives the same (well, similar, but means the same) error — Jean
– Jean, Commented Sep 13, 2013 at 14:43

Valentin S. · Accepted Answer · 2013-09-13 14:34:55Z

2

You first need to define the jquery dependency:

define('jquery', [], function () { return root.jQuery; });

Then you can use 'jquery' to load other libs depending on jQuery.

answered Sep 13, 2013 at 14:34

Valentin S.

5042 silver badges10 bronze badges

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

2 Comments

gustavohenke Over a year ago

From the jQuery Home: "...Can also be included as an AMD module."

Jean Over a year ago

I believe I already did this in path: paths: { 'jquery': '/git-cake-skeleton/js/lib/jquery-1.10.2', 'jqueryui': 'lib/jquery-ui-1.10.3.min', 'bootstrap': 'lib/bootstrap.min' },

Collectives™ on Stack Overflow

require.js with jquery ui, not finding jquery

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related