The React Report Viewer Does Not Load
Environment
Product | Progress® Telerik® Reporting |
Project Type | ReactJs Application |
Report Viewer | React |
Description
Loading a page with the React Report Viewer does not load the viewer, instead, there are errors in the browser console
Error Message
react-dom.development.js:22686
Uncaught TypeError: perspectiveManager.dispose is not a function
at Object.dispose (telerikReportViewer.js:9876:1)
at TelerikReportViewer.dispose (telerik-report-viewer.js:345:1)
at TelerikReportViewer.componentWillUnmount (telerik-report-viewer.js:237:1)
at callComponentWillUnmountWithTimer (react-dom.development.js:22699:1)
at safelyCallComponentWillUnmount (react-dom.development.js:22720:1)
at commitDeletionEffectsOnFiber (react-dom.development.js:23948:1)
at recursivelyTraverseDeletionEffects (react-dom.development.js:23813:1)
at commitDeletionEffectsOnFiber (react-dom.development.js:23937:1)
at recursivelyTraverseDeletionEffects (react-dom.development.js:23813:1)
at commitDeletionEffectsOnFiber (react-dom.development.js:23988:1)
Cause\Possible Cause(s)
The React
project uses StrictMode
which is throwing errors because of how we dispose the report viewer on unmounting.
Suggested Workarounds
Until we resolve the problem internally, the error can be avoided by not using StrictMode
on the TelerikReportViewer
component:
import React from 'react';
function ExampleApplication() {
return (
<div>
<TelerikReportViewer ... />
<React.StrictMode>
<div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
</div>
);
}