Chart not work with Next JS

[Darpit]

I am using canvas js with next Js, and I am getting the below error while building the next js page.

export default CanvasJSReact;
^^^^^^

SyntaxError: Unexpected token ‘export’
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at @canvasjs/react-charts (/home/web-admin/.next/server/pages/ecg.js:52:18)
at __webpack_require__ (/home/web-admin/.next/server/webpack-runtime.js:33:42) {
page: ‘/’
}

My app in with React version 17.0.2

[Darpit]

I also tried it with latest versions

{
“name”: “ecg-chart”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”
},
“dependencies”: {
“@canvasjs/react-charts”: “^1.0.0”,
“@emotion/react”: “^11.11.1”,
“@emotion/styled”: “^11.11.0”,
“@mui/material”: “^5.14.5”,
“eslint”: “8.47.0”,
“eslint-config-next”: “13.4.19”,
“formik”: “^2.4.3”,
“next”: “13.4.19”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“yup”: “^1.2.0”
}
}

[Manoj Mohan]

@darpit,

CanvasJS seems to be working fine with Next.js. Please take a look at this sample project for integration of CanvasJS Charts with Next.js.

If you are still facing the issue, kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can look into your code, run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[Darpit]

@Manoj Mohan

Thanks For the solution it works for me. :)