I tried to use the trial version of SciChart with Next.js. But I got “SciChartSurface.setRuntimeLicenseKey is not a function” error. I don’t know what’s wrong, could you provide guideline for using SciChart with Next.js?
These are the codes in my next.config.js:
const CopyPlugin = require("copy-webpack-plugin");
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => {
config.plugins.push(
new CopyPlugin({
patterns: [
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
]
})
);
return config;
},
}
module.exports = nextConfig
And I have imported these files in pages/index.js
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
- Kelly Chan asked 2 years ago
- last edited 2 years ago
- You must login to post comments
Hi Kelly, I don’t think this is the correct approach
SciChartSurface.setRuntimeLicensekey() is a static function. You need to import SciChartSurface not import setRuntimeLicenseKey
Please try this code
import { SciChartSurface } from “scichart/Charting/Visuals/SciChartSurface ”;
...
SciChartSurface.setRuntimeLicenseKey("... your license key");
If in doubt, see the docs!
Setting a Runtime License on a SciChartSurface
Another static method which allows you to license SciChart (apply a trial or paid production or test license) is SciChartSurface.setRuntimeLicenseKey()All of our instructions for licensing can be found at the page scichart.com/licensing-scichart-js. A quick code sample is below. Ensure that you call this function once before any SciChartSurface is shown with a valid runtime key.
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface"; // Set a runtime key in JavaScript once before any SciChartSurface is created SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY_HERE");
Best regards,
Andrew
- Andrew Burnett-Thompson answered 2 years ago
- You must login to post comments
Hi there
We have a list of sample projects of how to configure SciChart’s wasm & data file depending on frameworks & examples at this documentation page:
Deploying Wasm (WebAssembly) and Data Files with your app.
If you receive an error message when running your app, you may not have deployed the Wasm (WebAssembly) or data files correctly. Below are some steps on how to resolve that.
Option 1: Package Wasm & Data Files with WebPack (or similar)
In our tutorials and boilerplate examples we show you how to package the Wasm & Data files to load them in a variety of JavaScript frameworks. Find the links to setting up a JavaScript project below:
…
nextjs code sample
Click on that NextJS code sample we’ve published above. It has a section on wasm file deployment.
SciChart.js has a Wasm (webAssembly) and Data file which must be deployed to output folders for correct operation of our Js chart library.
Next.js requires *.data file to be in /public and wasm file to be in the build output .next/static/chunks/pages
To do this, we use next.config.js and webpack to copy the wasm file
// next.config.js
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
const destWasmFolder = "static/chunks/pages";
config.plugins.push(new CopyPlugin({
patterns: [
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: destWasmFolder },
]
}),)
// Important: return the modified config
return config
}
Does this help?
If not, let us know, we can update the NextJS sample.
Also there is a possibility to load wasm from CDN which will make life simpler, but requires an internet connection for your app.
To do this, see
Option 2: Load Wasm from URL with SciChartSurface.configure() or useWasmFromCDN()
at this webpage
- Andrew Burnett-Thompson answered 2 years ago
- You must login to post comments
Hi Andrew,
I can add license key with your approach now. Thanks!.
- Kelly Chan answered 2 years ago
Great! Glad its working for you, best regards, Andrew
- You must login to post comments
Hi Andrew,
Thanks for your help. I have changed the webpack config in my next.config.js according to the guideline. And moved the scichart2d.data to the “public” folder with the copy-files-from-to. I can see the chart loaded when I load the page now. However, I still get the “SciChartSurface.setRuntimeLicenseKey is not a function” error.
Here are my codes to initialize the SciChart:
async function initSciChart() {
const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", {
series: {
type: ESeriesType.LineSeries,
xyData: {
xValues: [1,2,3,4],
yValues: [1,4,2,6]
}
}
});
//xxx refer to the license code.
sciChartSurface.SetRuntimeLicenseKey("xxx");
}
It seems that the sciChartSurface does has a function called “SetRuntimeLicenseKey”. Do you know if there is anything wrong with my codes?
- Kelly Chan answered 2 years ago
- last edited 2 years ago
- You must login to post comments
Hi Andrew,
I finally found out how to add the license code. I should import the setRuntimeLicenseKey like this:
import { setRuntimeLicenseKey } from "scichart/Charting/Visuals/licenseManager2D";
The problem is solved now. Thanks!
- Kelly Chan answered 2 years ago
- last edited 2 years ago
- Hi Kelly, this is the wrong approach, see my updated answer below
- You must login to post comments
Please login first to submit.
