RequireJS and KendoUI - Shim jQuery dependency

[Misiu]

I'm trying to learn KendoUI and RequireJS.
I've created simple application that is displaying kendo window.

My require.config looks like this:

    require.config({
        paths: {
            jQuery: [
                'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min',
                'libs/jquery-2.1.0'
            ],
            underscore: [
                'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
                'libs/underscore'
            ],
            handlebars: [
                'http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min',
                'libs/handlebars'
            ],
            kendo: 'libs/kendo',
            text: 'libs/require/text',
            async: 'libs/require/async',
            templates: 'templates'
    
        },
        shim: {
            'jQuery': {
                exports: '$'
            },
            'underscore': {
                exports: '_'
            },
            'handlebars': {
                exports: 'Handlebars'
            },
            'k': {
              deps: ['jQuery']
          }
        }
    });

and my main:

    require(['jQuery', 'handlebars', 'helpers/handlebarsHelper', 'kendo/kendo.notification', 'k/kendo.window'], function ($, Handlebars, hh) {
    
        hh.init();
    
        var popupNotification = $("#popupNotification").kendoNotification({
            position: {
                top: 20,
                right: 20
            }
        }).data("kendoNotification");
    
        window.setInterval(function () {
            var d = new Date();
            popupNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "error");
        }, 7000);
    
        $("#window").kendoWindow({
            width: "500px",
            modal: true,
            resizable: false,
            actions: ["Close"],
            title: "About Josef Hoffmann",
            visible: false
        }).data("kendoWindow").center().open();
    
    });

My application works, but from time to time I get error
`Uncaught ReferenceError: jQuery is not defined`

RequireJS has option to specify shim, but it isn't working for KendoUI, probably I'm doing something wrong.

So my question is:
How should I configure requireJS to get it working with KendoUI?

I found http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-requirejs but I would like to load specific widgets as modules in my scripts and to be able to load jQuery as AMD module.

I've attached my demo project to show my problem, if everything load correctly hit F5 and after some tries You will get sema error as I did.

[Mihai]

Hi,

The shim doesn't work with a directory path, you need to specify a file.  I made just this change to your main.js file and now it works without error -- I modified the Kendo shim like this:

        "kendo/kendo.core": {
            deps: ["jQuery"]
        }

 

Best,
Mihai
Telerik

 

 

[Misiu]

Thanks for quick reply.
I have one concern, on docs: http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-requirejs last section says that this type of config is not for bundles.

Can I use individual KendoUI widgets with requirejs and use them in bundle?

[Mihai]

Hi,

Sorry about that section, it was outdated.  I removed it.  It is now safe to load the bundles with RequireJS and also, culture files no longer depend on kendo.core so you can load them at will and in any order.

Regards,
Mihai
Telerik

 

 

[Misiu]

Thanks :)
I hope change in docs will help others having same problem.