Uncaught ReferenceError: jQuery is not defined

3 posts, 0 answers
  1. ISD
    ISD avatar
    3 posts
    Member since:
    Dec 2017

    Posted 18 Jan 2018 Link to this post

    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. Dimitar
    Admin
    Dimitar avatar
    801 posts

    Posted 22 Jan 2018 Link to this post

    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.
  3. ISD
    ISD avatar
    3 posts
    Member since:
    Dec 2017

    Posted 01 Feb 2018 in reply to Dimitar Link to this post

    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
Back to Top