canvasjs not working Nextjs Build

• January 8, 2024 at 6:30 pm #44435
  
  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

  January 9, 2024 at 10:27 am #44444
  
  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

  January 9, 2024 at 12:48 pm #44446
  
  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

  January 9, 2024 at 4:27 pm #44448
  
  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