React Report Viewer not functioning when app is built with Vite

[Kyle Smith]

I just migrated from building with react-scripts to vite, as it seems react-scripts is deprecated. After the change, the react report viewer is not functioning correctly. Browser console shows:

Instantiation of Kendo TreeView as Document Map threw an exception TypeError: $kendoHtmlEncode is not a function

Uncaught (in promise) TypeError: $kendoHtmlEncode is not a function

I did some investigating and it seems that window.kendo has no properties/functions defined like it did before. Is there a possible work around for this?

EDIT: using version 19.23.718

EDIT2: For now, I've shifted to using the Html5 report viewer as described here: https://github.com/telerik/reporting-docs/blob/master/knowledge-base/how-to-use-html5-viewer-in-react-js.md

[Dimitar]

Hi Kyle,

We discussed this in a private ticket but I would also like to share the conclusion with the community. There is currently a problem with using the React report viewer with Vite, the kendo dependency does not get correctly loaded and thus the report viewer does not work.

The item is already logged on the public portal and I suggest that anyone with this issue cast their vote for it - TypeError: $kendoHtmlEncode is not a function in React Report Viewer when using Vite (telerik.com).

In the meantime, the approach from the HTML5 Report Viewer in React Application - Telerik Reporting may be used as a workaround.

Regards,
Dimitar
Progress Telerik