New to Telerik Reporting? Download free 30-day trial

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

See Also

Strict Mode - React Docs

In this article