issue with next js build

[Sunny Goyal]

I am getting below error when i am using canvas js chart in next js project i also imported it through dynamic route still facing the this issue

Collecting page data ..C:\Users\GulshanVerma\Downloads\data\node_modules\@canvasjs\react-stockcharts\canvasjs.stock.react.js:107
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 mod.require (C:\Users\GulshanVerma\Downloads\data\node_modules\next\dist\server\require-hook.js:64:28)
at require (node:internal/modules/cjs/helpers:110:18)
at 94476 (C:\Users\GulshanVerma\Downloads\data\.next\server\pages\Graph\Graph.js:1:7781)

[Manoj Mohan]

@indxx,

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

If you are still facing the issue, kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data 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

[Sunny Goyal]

Hi Manoj Mohan thanks for your reply it is working fine in local my end as well but when i create the build the above error occurred same with your shared code as well.

[Manoj Mohan]

@indxx,

Importing ‘@canvasjs/react-stockcharts’ dynamically for client side rendering should resolve the issue happening with the build script as well. Please take a look at the code snippet below for the same.

import dynamic from "next/dynamic";
const CanvasJSStockChart = dynamic(() => import("@canvasjs/react-stockcharts").then((mod) => mod.default.CanvasJSStockChart ), { ssr: false });

Also, check out this updated sample project for complete working code.

—–
Manoj Mohan
Team CanvasJS