New to Telerik Reporting? Download free 30-day trial

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;

See Also

In this article