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.