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>
);
}