Telerik Report Viewer Not Working in React Vite Application

[Arifullah]

I attempted to use the Telerik Report Viewer in my React application built with Vite, but it’s not working as expected. After researching the issue, I found that the suggested solution was to use the HTML5 Report Viewer. However, this approach also doesn’t work in the Vite app and throws the following error in the console:

javascript
Copy code
chunk-NGODP64W.js?v=9cef293c:16670 Uncaught TypeError: $(...).telerik_ReportViewer is not a function
    at ReportViewer.componentDidMount

I’ve attached my app setup for reference. Could anyone help me resolve this issue?

[Dimitar]

Hi Arifullah,

Thank you for the attached project!

It seems that you are trying to implement the workaround from the HTML5 Report Viewer in React Application - Telerik Reporting KB article to display the web report viewer in your application.

I inspected the ReportViewer.tsx file in the attached project, and the issue might be that you import $ from the jquery package, you may try to comment out that line of code:

import React, { Component } from "react";
//import $ from "jquery";

The reason there is no need to import it in this file is that jQuery and telerikReportViewer JS are already loaded in the index.html. This is the correct approach when using the workaround from the KB article above.

After doing the suggested change, an error about the dispose function may be thrown. You may follow the Dispose Is Not a Function Error On Loading the React Report Viewer - Telerik Reporting KB article to resolve that as well.

Please try the suggested solution and let me know how it goes.

Regards,
Dimitar
Progress Telerik