Chartjs plugin zoom Reference error: window is not defined

Question

In Nextjs application while I'm run the command for build and export there was an ReferenceError

I've attached the screenshot for your reference..

When remove the import of chartjs-plugin-zoom from the project, the build and export works properly..

Answer 1

In my case, I had to slightly modify the solution from skorphil. If you try to register the zoom plugin outside the component you will still get the same error. That's why you need to do it inside the component as following:

useEffect(() => {
if (typeof window !== "undefined")
  import("chartjs-plugin-zoom").then((plugin) => {
    ChartJS.register(plugin.default);
  });
}, []);

This makes sure that the plugin code will not run in the server.

Answer 2

This is because nextjs by default use server-side rendering. And zoom-plugin requires window object, but it is not available since the component is rendered on a node.

To make work component which relies on browser API , next/dynamic import can be used

chart-with-zoom.jsx

import zoomPlugin from 'chartjs-plugin-zoom'; // require window in order to be imported

ChartJS.register(zoomPlugin)

export default function ChartZoom() {
...

app.jsx

import dynamic from 'next/dynamic';

const ChartZoom = dynamic(() => import('PATH TO chart-with-zoom'), {
  ssr: false, // Disable server-side rendering
});

...
return <ChartZoom />