Telerik React Report Viewer not working in NextJS
Environment
| Product | Progress® Telerik® Reporting |
| Project Type | NextJs |
| Report Viewer | React |
Description
The NextJS application cannot render the page with the React Report Viewer. Instead of the report viewer, the page shows a stack trace of errors.
Steps to Reproduce
Create a new NextJS application through create-next-app, then add the React Report Viewer to a page and try to load that page.
Error Message
ReferenceError: window is not defined
Cause
Next.js is universal, which means it executes code first server-side, then client-side. The window object is only present client-side which is a problem because our React Report Viewer interacts with it.
Solution
Render the React Report Viewer in a NextJS Client Component which you may enable with the use client directive, for example:
"use client"
import dynamic from 'next/dynamic'
const ReactReportViewer = dynamic(() => import('@progress/telerik-react-report-viewer')
.then(types => types.TelerikReportViewer), { ssr: false });
export default function Home() {
return (
<>
<link href="https://kendo.cdn.telerik.com/{}kendosubsetversion}}/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />
<ReactReportViewer
serviceUrl="https://demos.telerik.com/reporting/api/reports/"
reportSource={{
report: 'Dashboard.trdx',
parameters: {}
}}
viewerContainerStyle = {{
position: 'absolute',
inset: '5px'
}}
viewMode="INTERACTIVE"
scaleMode="SPECIFIC"
scale={1.0}
enableAccessibility={false} />
</>
);
}
Sample Project
Download the sample project from our reporting-samples repository.
Notes
The next.config.js configuration may also need to be updated so that React's StrictMode is not being used:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false
};
export default nextConfig;