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
The solution is to render the component with the report viewer without SSR
//create the dynamic component
const DynamicReportViewer = dynamic(() => import('./ReportViewer').then(mod => mod.ReportViewer), {
ssr: false,
})
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
<link href="https://kendo.cdn.telerik.com/{{site.kendosubsetversion}}/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/{{site.kendosubsetversion}}/styles/kendo.blueopal.min.css" rel="stylesheet" />
</Head>
<DynamicReportViewer />
</div>
)
}
export default Home
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,
swcMinify: true,
}
module.exports = nextConfig