There seems to be no documentation on how to configure scichart when using app router with nextJS, and I am running into an error.
I have followed a combination of this tutorial, and additional setup for nextJS found here, specifically the next.config.js file, copy-files-from-to.json, and additions to package.json. But I continue to get the error: ‘Module has already been declared’. (first/second pics in PDF)
I have attached a photos inside the pdf, including my project structure, and a zip with the files to duplicate.
Steps to replicate:
1) extract files and add root package.json to a directory of your choice
2) from within this directory, use ‘yarn create next-app scichart-prototype’ (use set-up options from 4th image in PDF)
3) Replace root layout.tsx and page.tsx with files in zip, add SciChartDemo directory and add page.tsx from that (also in zip)
4) replace the next.config.mjs file with the next.config.mjs file from the zip
5) add the copy-files-from-to.json from the zip
6) replace the package.json file in scichart-prototype directory with file from the zip.
7) run ‘yarn install’ to add packages
8) run ‘turbo dev’
9) after visiting localhost:3000/ click the Sci Chart Demo link to see error.
Thanks for taking a look.
- max keirn asked 2 months ago
- last edited 2 months ago
Thank you for the detailed steps to replicate. We have had a few reports of this and are currently investigating. I suggest you ask this on the Next.js forums as well (please link to that if you do) as solving this may require understanding of Next.js internals that we do not have. Regards David
- You must login to post comments
link to question on Nextjs forum.
- max keirn answered 2 months ago
- last edited 2 months ago
- You must login to post comments
Hello Max, we are investigating the error on our side and here are some updates on the issue.
The error occurs specifically with Next 14.1, and seems to be related to module resolution during compilation. Specifically while compiling CommonJS modules. (BTW, running the boilerplate app in dev mode with “–turbo” seems to work fine)
Unfortunately, SciChart sources are built in CommonJS, and the library doesn’t support ES Modules, at the moment. (v3.3.570)
But the recently released library version provides a bundle with ESM support – “scichart/_wasm/scichart.browser.mjs”.
So as a temporary workaround you could use it like this:
import { SciChartSurface, NumericAxis } from "scichart/_wasm/scichart.browser.mjs";
To enable type checking you may add
import * as SciChartValue from "scichart/_wasm/scichart.browser.mjs";
import * as SciChartType from "scichart";
const SciChart = SciChartValue as typeof SciChartType;
const { SciChartSurface, NumericAxis } = SciChart;
We will be posting updates here. And, let us know if that works on your side.
- Jim Risen answered 2 months ago
- You must login to post comments
Please login first to submit.
