Pre loader

Problem to use SciChart with Next.js

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


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 } ) => {
            new CopyPlugin({
                patterns: [
                    { from: "node_modules/scichart/_wasm/", 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";
  • You must to post comments
Best Answer

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 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

Best regards,

  • You must to post comments
Great Answer

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

  • You must 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 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.

It seems that the sciChartSurface does has a function called “SetRuntimeLicenseKey”. Do you know if there is anything wrong with my codes?

  • You must 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!

  • You must to post comments

Hi Andrew,

I can add license key with your approach now. Thanks!.

  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.