New to Telerik Reporting? Download free 30-day trial

Telerik React Report Viewer not working in NextJS


Product Progress® Telerik® Reporting
Project Type NextJs
Report Viewer React


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


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.


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}>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />

        <link href="{{site.kendosubsetversion}}/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="{{site.kendosubsetversion}}/styles/kendo.blueopal.min.css" rel="stylesheet" />
      <DynamicReportViewer />

export default Home


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

See Also

In this article