Window is undefined about react-chartjs-2 HOT 8 CLOSED

same here, my next.js complains about this

ReferenceError: window is not defined
    at Object.<anonymous> (Z:\xx\StockDashboard\next\node_modules\hammerjs\hammer.js:2643:4)
    at Module._compile (node:internal/modules/cjs/loader:1099:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Z:\xx\StockDashboard\next\node_modules\chartjs-plugin-zoom\dist\chartjs-plugin-zoom.js:8:110
    at Object.<anonymous> (Z:\xx\StockDashboard\next\node_modules\chartjs-plugin-zoom\dist\chartjs-plugin-zoom.js:11:3)
    at Module._compile (node:internal/modules/cjs/loader:1099:14)

from react-chartjs-2.

@tbvjwodn2 What fixed it for me in NextJS at least(So maybe even if you don't use NextJS some stuff on that page can be useful) is I had to import the parent component that contained the chart dynamically

import dynamic from 'next/dynamic'

const SidePanel = dynamic(() => import('./components/sidePanel'), { ssr: false });

That side panel component has my line chart chart from reach chart.

from react-chartjs-2.

Hey @mira-thakkar,

Thanks for reaching out.

When doing server rendering there is no window available thus you are unable to render them server side.

The error you are getting is directly from the chart.js library, unfortunately as per my knowledge there isn't much we can do..

from react-chartjs-2.

If you manage to find a workaround please do post it to this issue so other people will be able to reference it.

Closing till then.
Thank you for reporting.

from react-chartjs-2.

This is horrible but it works.. reactjs/react-chartjs#57

from react-chartjs-2.

This error is happening for my next.js application, did anybody got a solution for this?

from react-chartjs-2.

@tbvjwodn2 What fixed it for me in NextJS at least(So maybe even if you don't use NextJS some stuff on that page can be useful) is I had to import the parent component that contained the chart dynamically

import dynamic from 'next/dynamic'

const SidePanel = dynamic(() => import('./components/sidePanel'), { ssr: false });

That side panel component has my line chart chart from reach chart.

Thank you for the help! :)

from react-chartjs-2.

@tbvjwodn2 What fixed it for me in NextJS at least(So maybe even if you don't use NextJS some stuff on that page can be useful) is I had to import the parent component that contained the chart dynamically

import dynamic from 'next/dynamic'

const SidePanel = dynamic(() => import('./components/sidePanel'), { ssr: false });

That side panel component has my line chart chart from reach chart.

This works perfectly!

from react-chartjs-2.