This is a migrated thread and some comments may be shown as answers.

RequireJS and KendoUI - Shim jQuery dependency

4 Answers 269 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Misiu
Top achievements
Rank 2
Misiu asked on 13 May 2014, 06:25 AM
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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Mihai
Telerik team
answered on 13 May 2014, 12:03 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Misiu
Top achievements
Rank 2
answered on 13 May 2014, 01:45 PM
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?
0
Mihai
Telerik team
answered on 13 May 2014, 03:33 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Misiu
Top achievements
Rank 2
answered on 13 May 2014, 04:37 PM
Thanks :)
I hope change in docs will help others having same problem.
Tags
Integration with other JS libraries
Asked by
Misiu
Top achievements
Rank 2
Answers by
Mihai
Telerik team
Misiu
Top achievements
Rank 2
Share this question
or