[Solved] How to use unminified scripts with 2023.1

[Bill]

I import the Kendo UI scripts from a local folder (no CDN) and use the unminified version in my development environment so that I can step with the Chrome JavaScript debugger into Kendo code.  My setup in my layout page is similar to this:

<environment include="Development">
    <script src="@Url.Content("~/kendo/js/nonmin/kendo.all.js")" type="text/javascript" asp-append-version="false"></script>
    <script src="@Url.Content("~/kendo/js/nonmin/kendo.aspnetmvc.js")" type="text/javascript" asp-append-version="false"></script>
    <script src="@Url.Content("~/kendo/js/kendo.timezones.min.js")" type="text/javascript" asp-append-version="false"></script>
</environment>
<environment exclude="Development">
    <!-- imports the minified version here -->
</environment>

I would copy the unminified versions of kendo.all.js and kendo.aspnetmvc.js from the source package download to the nonmin folder under my app.

Now with the change to modules, that does not work.  Since kendo.all.js just imports other scripts, I copied all the .js files from the source distribution to the nonmin folder.  Then I got errors for each script "Uncaught SyntaxError: Cannot use import statement outside a module" so  I changed the type on the script tags from "text/javascript" to "module".  But now every instance of kendo.syncReady within the page yields the error "Uncaught ReferenceError: kendo is not defined" 

[Shane]

I would like to know as well as I'm getting some errors I'd like to be able to debug. Thanks! 

[Alexander]

Hi,

Thank you for reaching out.

Indeed, with the latest 2022.3.1109 Telerik UI version, we've made some changes and now the source code is transformed from AMD to ECMAScript modules (ESM). For more information, I recommend you review the following blog post: 

https://www.telerik.com/blogs/kendo-ui-jquery-transformed-ecmascript-modules

That being said, to manually build the source code of the components I would recommend the following steps:

• Navigate to your downloads page.

• Open the Kendo UI for jQuery page and scroll down to the Source Code section.

• Once you have downloaded and extracted the source code, navigate to the src folder and open a terminal.

• Run npm install to install the NPM dependencies.

• Then run npm run scripts to compile the scripts. For clarity, after the fix, npm run scripts should output only the traditional scripts - the AMD/UMD modules. 

When the execution completes you can access the unminified version of the scripts from the dist/js directory. 

For more information bout the ECMAScript modules, I would also suggest reviewing the following article:

ECMAScript Modules

Please give the aforementioned suggestion a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik

[Shane]

Hey! I have a very similar question at 2023.1 Non-min js files "Uncaught SyntaxError: Cannot use import statement outside a module" in UI for ASP.NET MVC | Telerik Forums. 

However, I do not have npm or the ability to install it for an ASPNETMVC project. Is there another way to build the source or download it directly? 

[Alexander]

Hi Shane,

Thank you for reaching out.

I completely understand your concern regarding the Node.js integration within your existing project. As for the new modules, we understand that in large and legacy projects, it can be difficult to replace all the code snippets or introduce integrate other infrastructural changes to your current premises.

With that in mind, we are at your disposal should any further assistance is required regarding the integration of the non-minified javascript files as currently, the non-minified files which are distributed within the "telerik.ui.for.aspnet.core.{version}.commercial-source" are from version 2022.3.1109 distributed only as ECMAScript modules (ESM). 

Nevertheless, I found the following article which could potentially prove helpful during your endavors that further discusses how Node.js can be integrated and utilized within an existing ASP.NET MVC application:

https://stackoverflow.com/questions/37805599/using-npm-with-an-mvc-project

I hope this helps.

[Shane]

Thank you! I was able to include the non minified scripts into my project based on your comment! I'll reach out with any additional issues. 

[Alexander]

Hi Shane,

Thank you for the heads up. I'm glad that the provided suggestions have suited you well.

If any further inquiries arise which differentiate from the initial forum topic, please consider opening a new forum or support thread. This will help continue the communication in a more concise manner.

[Bill]

This technique worked for me, but I hadn't updated my version of KendoUI since 2024.2.  Now I'm updating to 2026.3 and there is no "scripts" command for npm run scripts.  What is the current way to build unminified drop-in replacements for kendo.all.js and kendo.aspnetmvc.js?

[Bill]

This technique worked for me, but I hadn't updated since early/mid-2024.  Now there is no "scripts" command for npm run scripts.  What is the current method of building drop-in unminified scripts for 2026.3?

[Alexander]

Hi Bill,

It's been a while :)

Please, allow me to dive deeper about the reason behind the dissapearance of the scripts command, so that things are more clear and transparent.

After February 2026 we have made some substantial refurbishments to the we way produce the zip bundles and build scripts.

The main area we focused on was to reduce our bundle release times and improve the local debugging process as well. As a consequence, the previous "npm run scripts" command has been dichotomized into:

• npm run build - build the esm, cjs and umd (the one you're interested in) version of the scripts.
• npm run build:dev - builds a dev(esm) version of the scripts only. 

Accompanied with the introduction of the Rolldown bundler which explains the "sudden" appearance of the so-called "rolldown-config-*" files within our distribution. More is explained within the following documentation resource:

• Manually Building the Source Code (Documentation)

That being said, once you acquire the source code - by following the guideline in the aforementioned documentation, you can then provide a rolldown configuration of your own, which will act as an imitation of the existing "UMD" configuration while:

• Disabling minification.
• Producing "{name}.js" instead of "{name}.min.js".
• Rewriting dependency paths to their non-minified names.

Here is an example:

rolldown.config.no-min.mjs (naming of configs wasn't my strong suit) 

import config from './rolldown.config.mjs';

export default config
    .filter(options => options.output.some(output => output.format === 'umd')) // Plays a key-role in distiguishing only UMD builds.
    .map(options => ({
        ...options,
        output: options.output.map(output => ({
            ...output,
            entryFileNames: '[name].js',
            minify: false, // The key ingredient to producing a non-minified incarnation of the files.
            paths: output.paths && Object.fromEntries(
                Object.entries(output.paths).map(([key, value]) => [key, value.replace(/\.min$/, '')])
            )
        }))
}));

From there, you can then provide a command on your own within the respective "package.json" alongside the rest of the build scripts:

package.json:

"scripts": {
    "build-no-min": "npm run rolldown -c rolldown.config.no-min.mjs",
     ...
}

Additionally, we have an existing item that was logged not that long ago:

• GitHub Issue - https://github.com/telerik/kendo-ui-core/issues/8461

I have raised the priority of this item and have updated your Telerik points, as a way of saying thank you and to keep up the awesomeness!

I understand that this may be important for you and have personally taken on the responsibility of providing this to our existing distribution. But it would be of tremendous help, if you give feedback on whether the aforementioned workaround helped :)

[Bill]

Alexander - thank you for the info.

I copied rolldown.config.mjs to rolldown.config.nonmin.mjs and edited that - changed minify to false and removed the .min in the entryFileNames - and added a command to package.json to use it.  Running failed with missing glob; resolved that step with npm i --save-dev glob.  Then was able to generate the files, but there were warnings about @progress/kendo-licensing being unresolved and trying to run gave some errors in the Chrome DevTools console.  So I npm installed @progress/kendo-licensing and tried again, but still had three JavaScript errors - undefined/null variables one of which had licensing in the name. 

At that point I didn't know if maybe I was including the scripts out of order or missing some (as I had already discovered that there is a new kendo.aspnetmvc.ready.js that I needed to include), so I thought that rather than fighting with it, I'd try to move to the module-based scripts.  That wasn't going well either - we have kendo.syncReady in script blocks directly in cshtml files all over the place - more undefined errors due to deferred module loading.

So I finally switched to pointing to the CDN.  The script map files make Chrome DevTools display the source quite nicely, which is really what I needed - the ability to step into KendoUI source without it looking like a huge single line of "a=b(q)+m.p(z)".  Since the environment blocks confine it to my local development, the loading behavior of the deployed app is unchanged (a locally-served minified bundle).  And it's cleaner and easier to update.

[Alexander]

Hi Bill,

I am happy that you have found a way to get yourself around debugging the source code. I understand that setting things up initialy might come at times as a rather tedious and overwhelming process. So, the kudos actually goes to you for sticking the landing.

Please allow me to give you a different perspective and potential food for though when it comes to tackling the moduler-based script phenomenom - when it comes to the server-side wrappers.

I am not certain whether it has come to your attention, however, as of the "2024 Q4 Novemberish Release" we have provided the means of initializing the Telerik UI for ASP.NET Core wrappers as "ECMAScript modules".

Since you have mentioned the following:

"We have kendo.syncReady in script blocks directly in cshtml files all over the place."

We have also employed a mechanism for initializing modularly each of the server-side wrappers on a more global scale. The aim of which is to remove the aformentioned burden.

More detailed information is available in the following resource:

• Initializing Components Globally as Modules (Documentation)

Basically, what this does annotating each of the script blocks (that happen to contain  "kendo.syncReady()") with a with the "type=module" attribute.

This shift in gears will exponentially bolster your application's load performance, whilst removing the inclusion of conglomarate files when a page only happens to use a portion of them.

I would personally recommend going through the following blog post, which gives you a broader view of why ECMAScript Modules play the role of the masked caped crusader that makes sure that the application contains readable code (in your case debuggable) with good separation :)

• Kendo UI for jQuery Is Transformed to ECMAScript Modules (Blog Post)

The wrappers also fall within this category, as their anatomy comprises of sculpturing a runnable jQuery initialization logic under the hood:

I hope this helps in the long run and once again thank you for keeping me in the loop with how things are going on your end!