canvasjs not working Nextjs Build

[itissandeep]

I have integrated ‘@canvasjs/react-charts’ into my nextjs project and its working fine in dev mode but when I am deploying it to production its giving this error

[Vishwas R]

@itissandeep,

CanvasJS is a client-side library and has to be prevented from rendering at server-side. When you try to generate build for production, it causes issue with libraries that depend on the browser’s window object. You can import CanvasJS package dynamically by passing ssr: false that disables importing of components that are not needed for SSR. Please take a look at this sample project for a working example on adding CanvasJS React Charts in Next.js app.

Also, please refer to this article for more information on adding CanvasJS chart in Next.js apps.

—
Vishwas R
Team CanvasJS

[itissandeep]

The local development and Build is working fine, only the deployed version is causing the following issue

_app-e3dd2cd31992d86a.js:15 TypeError: Cannot read properties of undefined (reading 'ctx')
    at ia (94afa71f.f5d98709be0502f7.js:1:69906)
    at p.setLayout (94afa71f.f5d98709be0502f7.js:1:93512)
    at p.render (94afa71f.f5d98709be0502f7.js:1:101153)
    at CanvasJSChart.componentDidMount (3374.1bc5ec65aafb9f88.js:1:644)
    at lk (framework-ca706bf673a13738.js:9:90627)
    at jk (framework-ca706bf673a13738.js:9:111106)
    at framework-ca706bf673a13738.js:9:111117
    at Qk (framework-ca706bf673a13738.js:9:111629)
    at Fk (framework-ca706bf673a13738.js:9:96298)
    at jg (framework-ca706bf673a13738.js:9:44901)
    at framework-ca706bf673a13738.js:9:93663

[Vishwas R]

@itissandeep,

We tried deploying the production build in a server and in vercel, it seems to work fine when you mention chart component to be used in client-side ("use-client"). Please take a look at this link for a working sample that’s deployed in vercel and checkout this Github repository for the project.

If you are still facing issue, kindly share your project with us over Google-Drive or Onedrive (or in Github) so that we can try deploying it from our side to understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS