This is a migrated thread and some comments may be shown as answers.
Uncaught ReferenceError: jQuery is not defined
2 Answers 546 Views
This is a migrated thread and some comments may be shown as answers.
ISD
Top achievements
Rank 1
ISD asked on 18 Jan 2018, 10:13 PM

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

Sort by
0
Dimitar
Telerik team
answered on 22 Jan 2018, 04:15 PM
Hello,

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.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
ISD
Top achievements
Rank 1
answered on 01 Feb 2018, 07:26 PM
Thanks, I was able to resolve this issue by running npm install expose-loader. Expose loader exposes jQuery in a global scope to Kendo UI
Asked by
ISD
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
ISD
Top achievements
Rank 1
Share this question
or