Is Vite supported?

[Hui Chuan]

Module Bundlers - Kendo UI Third-Party Tools - Kendo UI for jQuery

The module bundlers page references Vite as an example which leads me to believe that it can be used with Kendo.

However even this basic example doesn't appear to work: https://stackblitz.com/edit/vitejs-vite-i842ucun?file=src%2Fmain.js

Am I doing something wrong?

[Lee]

Hui are you getting the error: Uncaught ReferenceError: jQuery is not defined

[Lee]

I am using vite also

[Hui Chuan]

I used @rollup/plugin-inject to inject jQuery so instead the error is: Uncaught TypeError: Cannot read properties of undefined (reading 'jQuery')

[Nikolay]

Hi Hui Chuan,

This error usually occurs when the jQuery library is not loaded before Kendo UI scripts, or if there's a conflict with the jQuery version. Here are some steps to resolve this issue:

1. Ensure your HTML file includes the jQuery script before the Kendo UI script:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.all.min.js"></script>

2. Ensure you are using a compatible version. Below, I am posting an article with the supported jQuery versions for each Kendo UI:

https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support

3. Wrap your Kendo UI initialization code inside a $(document).ready() function to ensure it runs after the DOM is fully loaded:

$(document).ready(function() {
    // Kendo UI initialization code here
});

Regards,

Nikolay

[Hui Chuan]

Hello Nikolay,

This question concerns Vite. I am using ESM imports as described here: ECMAScript Modules - Download and Installation - Kendo UI for jQuery
I can confirm that the same demo works with webpack but not Vite.

[Neli]

Hi Hui,

Could you please try to add a globals.js that will ensure that the jQuery is global before the Kendo scripts are loaded. 

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;

export default jQuery;

Then, you can load the gloabl file right before improting the Kendo modules:

import './globals.js'; 

// Import only required Kendo modules.
...
import '@progress/kendo-ui/js/kendo.grid.js';

I hope this helps. 

Regards,

Neli

[Hui Chuan]

Hello Neli,

Here is a fork with the changes you described: https://stackblitz.com/edit/vitejs-vite-igmnmgfx?file=src%2Fmain.js

The build fails because '@progress/kendo-ui/js/kendo.grid.js' is not an ESM module. If we revert to the ESM version, the same error from previously appears: Uncaught TypeError: Cannot read properties of undefined (reading 'jQuery')

[Nikolay]

Hi Hui Chuan,

I am attaching a sample Vite project where Kendo UI for jQuery is loaded. Please examine it and let me know if you have any questions.

To run it:

npm install

Then:

npm run dev

Regards,

Nikolay

[Hui Chuan]

Hi Nikolay,

Your example project stops working if you add another import, for instance: kendo.scheduler.js

It gives a different error message than my initial example but they're fundamentally the same and the error message changes depending on which components you import.

[Nikolay]

Hi Hui Chuan,

I added a Scheduler to the Vite application, and it builds as expected. Please find it attached.

Regards,

Nikolay

[Hui Chuan]

Hi Nikolay,

I was wondering why you didn't reproduce my issue until I realized that it stops working entirely once you import a "bad" package and then you have to delete the Vite cache so the project can build again. kendo.appbar.js can cause it among a few others.

[Nikolay]

Hi Hui Chuan,

Thank you for the update. I believe this will be helpful to others facing the same scenario.

Regards,

Nikolay

[Hui Chuan]

So to answer the question, is Vite supported? Sorta. Some components work, some don't.