Issues loading latest Kendo version using requireJS

[Ron]

I'm loading the Kendo framework using requireJS, it is being loaded but the global variable isn't being set (window.kendo) and it is not being injected into my modules, sample:

http://dojo.telerik.com/aPESI/2

[Ron]

I have tested with v2015.2.805 and it seems to work but can't get the same code to work with v2016.1.112

[Ben]

Ron,

 I am having this same problem with the latest version of Kendo.  I have been using requirejs for a while with Kendo 2015.3.1111 without issues.  After pointing my app to the latest 2016.1.112 I am receiving "kendo is not defined" errors.

Ben

[Ben]

Is this issue related to (or the same) as this issue? https://github.com/telerik/kendo-ui-core/issues/1367

Ben

[Grzegorz]

Newest version 2016 Q1 changes AMD wrappers. RequireJS does't work properly. window.kendo is undefined while loading modules despite the fact that previously has been downloaded kendo.core

[Petyo]

Hi,

the github issue link below is indeed related to the problem - please check the explanations there. 

Regards,
Petyo
Telerik

 

 

[Saikat Chatterjee]

I'm having the same problem with 2016.1.112 and the latest internal build 2016.1.118.

Both versions have the "./" removed from all internal dependencies so my guess is that RequireJS looks under the "baseUrl".

With many JS libraries in my project I have a common "baseUrl" and don't want it hijacked by any one framework. 

[Petyo]

Hello Saikat,

I will provide the same response like the one in the support ticket in case other people find this forum. Maybe someone will come up with a better solution:

The naming of the modules is necessary because the commercial files we distribute are assembled by multiple modules - we had to change thad in order to address the AMD loading of the bundle files in question. Previously, we had multiple cases of people hitting obscure bugs due to multiple modules being loaded from different bundles (like kendo.all + kendo.dropdownlist for example).  

Unfortunately, this brought the necessary change of the requireJS configuration - I agree with you that using the baseUrl for the kendo libraries is not a good solution, however, this seems to be the only way for requireJS to load such named modules. 

In case you have considered this an option, I would like to point out that other, modern module loaders like Webpack and SystemJS are much more flexible, and their configuration seems much better - check this and this help article. 

 

Regards,
Petyo
Telerik

 

 

[Chennabasappa]

Hi,

We are using RequireJS to load the Kendo UI Frame Work. The same code is working with v2015.3.930 but when using the v2016.1.112 we are unable to inject 'kendo.directives' in module.We want to use v2016.1.112 as we have to use some of the new features.

Can you please provide an example that how we can use it with RequireJS.

Thanks.

[Mike]

You guys using RequireJS, I'm curious.  Are you writing your own code as AMD modules too?  The syntax is beyond clunky, IMHO.

 

Wouldn't you be better off with something like Webpack, or SystemJS if you don't want a build step?  That would allow you write your stuff  as ES6 modules (with Babel) or CommonJS modules, but still load AMD-compliant libraries such as Kendo. 

[Petyo]

Hi Mike,

I second your opinion on RequireJS vs Webpack/SystemJS. Of course, requirejs has been around for ages, so my guess is that some people are sticking to a stable solution - nothing wrong with that. 

Apart from that, we updated our RequireJS help article, and it should work as expected with the latest internals. It also covers AngularJS integration.

Regards,
Petyo
Telerik

 

 

[Javier Sainz]

Hi

I made a gulp file based on the custom build provided by Kendo Team to create a build for RequireJS backward compatibility https://gist.github.com/FcoJavierSainz/bdf8619c190cfe3e671a

[Devin]

[quote]Petyo said:

In case you have considered this an option, I would like to point out that other, modern module loaders like Webpack and SystemJS are much more flexible, and their configuration seems much better - check this and this help article. 

 

[/quote]

 

I've conversed with Petyo on this subject in a ticket and unfortunately systemjs does work 100% either since it will fail to gather all dependencies when bundling files.   I've forked/expanded upon a github repository here that demonstrates the problem: https://github.com/barefootdeveloper/kendo-systemjs-2016 .  For good measure I also modified 2015.3 as a working example: https://github.com/barefootdeveloper/kendo-systemjs-2015

As far as I can tell 2016.1 broke requirejs support (baseUrl configuration is not ideal as acknowledged) and suggested people move to systemjs, but systemjs isn't really fully supported either since bundling doesn't work.

I have to admit I'm rather frustrated since I've burned a ton of time trying to get 2016.1 working the way 2015.3 did and after configuring both systemjs and requirejs the end result is I'm still stuck on 2015.3, which is rather annoying since I pay for a personal (non-work reimbursed) license of Kendo UI.

Is there any method of using Kendo UI that supports both bundling and dynamic loading of modules that actually works?  Has anyone tried webpack?

[Mike]

@Devin,

There are working Kendo+Webpack examples in my Github account - yes, the same one from which you forked your examples above!

See: https://github.com/brownieboy/kendo-webpack-systemjs

As with SystemJS, the 2016 versions of Kendo brought new problems with Webpack, see https://github.com/webpack/webpack/issues/1897.   I managed to workaround this though, as you'll see from the comments.

[Devin]

Thanks for the reference (and for the libraries I forked to demonstrate the problem)!   I still think this highlights a big problem with the 2016.1 release, and Telerik doesn't seem to be concerned by it, yet they still highlight requirejs and system compatibility whenever requirejs is non ideal at best and systemjs is in my opinion completely broken since it can't bundle.  Http/2 still isn't far enough long to rely upon it for production.

[Petyo]

Hi everyone,

I would like to assure you that we are definitely concerned about the problem. The named modules we introduced is an attempt to fit the module concept in a distribution format which was designed long ago, and meant to be used in a different way. 

The problem is discussed in details here. The main takeaway from is that the only meaningful way we can address this is to start providing an NPM distribution, as current individidual file distribution does not handle the modules concept well. 

Regards,
Petyo
Telerik

 

 

[Devin]

That's good to hear, I think it'd probably be beneficial to the community if the limitation of bundling was highlighted on systemjs's support page.  Might save someone like me that starts swap out requirejs for systemjs only to find out it doesn't support bundling :)

 

Keep on keeping on, despite my current frustration, I'm still a big fan of how much functionality I get out of kendo.

[Petyo]

Hello,

SystemJS is not meant to bundle stuff in general. This is what JSPM does. However, it still looks like Webpack is more mature and used when it comes to bundling. 

Regards,
Petyo
Telerik

 

 

[Devin]

Just checking in on this issue.  It seems the latest version 2016.2.504 doesn't assist with this issue at all.

[Petyo]

Hello,

we published Kendo UI in NPM format - please give it a try. 

Regards,
Petyo
Telerik by Progress

 

 

[Devin]

I'm VERY happy to report that installing via NPM did allow a site using kendo to be packed down using systemjs-builder.

Thank You Thank You Thank You!

[Will]

It would be nice if you guys provided a distribution with kendo.aspmvc.js included.  I had to create a shim in Webpack.  Not a big deal once you figure it out but just one more problem to solve during the transition.

And BTW: for anyone who has exploited the features of RequireJS, in my case RequireJS.Net, transitioning to Webpack can be done but it is not a trivial task.  I'm a week into converting a very simple ASP MVC app and there are many things (e.g. cache busting, RequireJsOptions) for which new solutions have to be found.

[Petyo]

Hello,

the current NPM distribution includes kendo.aspnetmvc.js, so perhaps I am missing something. 

Regards,
Petyo
Telerik by Progress

 

 

[Will]

Sorry Petyo,

I phrased it poorly.  What I meant to say was that it would be nice if it was part of the dependencies i.e. available without having to specifically include it in some way.  Upon reflection, I realize that most of those who use kendo.aspmvc.js probably do so through the UI for ASP.Net MVC interfaces.  I'm just using it in conjunction the Kendo UI Professional bits and so that I can have the data interface without using the MVC wrappers/helpers.

Cheers,

Will

[T. Tsonev]

Hi,

The kendo.aspmvc.js file is specifically designed to be included as an optional dependency. The idea was to save on space and download size.

Regards,
T. Tsonev
Telerik by Progress

 

 

[Evelyn]

 Upgrade angular version to 1.6,jquery to 3.1.1 and kendo to 2018.1.221.I'm trying to load kendo 2018.1.221 version using require js (version 2.1.17) but getting issue like Kendo is undefined.Previously i was using kendo 2014 ,it was working fine and even 2015 works perfectly but when i try to use 2018 kendo version its giving me issue.

[Dimitar]

Hello Evelyn,

We have provided an answer in your support ticket on the same topic. I would suggest to continue our communication there in order to prevent duplication of threads. 

The suggested solution in the ticket is the following:

1) In order to require Kendo properly, the RequireJS config should be altered in the following way:

require.config({
  paths: {
    "angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min",
    "jquery": "https://code.jquery.com/jquery-3.1.1.min",
    "kendo.web.min": "https://kendo.cdn.telerik.com/2018.1.221/js/kendo.web.min"
  },
  shim: {
    "angular": { deps: ["jquery"] },
    "kendo.web.min": { deps: ["angular"] }
  }
});

2) The above could then be used in the following way:

require([ "angular", "kendo.web.min" ], function() {
  var app = angular.module("app", ["kendo.directives"]);

  app.controller("controller", ["$scope", function($scope) {
  ...

Regards,
Dimitar
Progress Telerik