I get this error in my Core 2 project using the KendoUICore package version 2018.1.117. I'm using webpack to compile and bundle my javascript and css. I make sure to define a var for jquery and then import the required kendo files
var $ = require("jquery");
//js files
require('./site');
import 'kendo-ui-core';
import '@progress/kendo-ui/js/kendo.all.js'
import '@progress/kendo-ui/js/kendo.aspnetmvc.js'
//css & less
require('kendo-ui-core/css/web/kendo.common.core.less');
require('kendo-ui-core/css/web/kendo.material.less');
import '../css/site.css';
@(Html.Kendo().Upload()
.Name("files")
.HtmlAttributes(new { aria_label = "files" })
)
Interestingly enough, the jqx date picker widgets that rely on jQuery have no problem and are rendered correctly. However the Upload control does not.
When I remove the jquery variable and kendo imports and statically reference jquery FIRST and then kendo js as shown below, the Upload control displays as expected with no error, although the styling is off
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
@* Place Kendo UI scripts after jQuery *@
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
What gives? Can I not use webpack to bundle kendo and jquery?
2 Answers, 1 is accepted
For a valid Webapck configuration that can be used to bundle the Kendo UI JS and CSS, please refer to the following article:
Also, you are correct that the jQuery bundle has to be loaded before the Kendo scripts. In addition to this, both of those references should be added to the <head> tag of the page.
Concerning the styling issues, for the material theme, the kendo.common-material.less and kendo.material.less files should be referenced. You can refer to the Less Themes Documentation for additional information on how to setup/customize the respective themes.
Dimitar
Progress Telerik
Rank 1