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.

Error: Could not load SciChart WebAssembly module. Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version

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:

JS Project framework	Boilerplate Project or Setup Instructions
npm / webpack	Tutorial - Setting up a project with WebPack
Vanilla Javascript (no npm, webpack)	Tutorial - Including SciChart.js in an HTML Page
npm / webpack / react	code sample
vue.js	code sample
nextjs	code sample
Angular	code sample
blazor via JS Interop	code sample
Electron	code sample

See more boilerplate examples for JavaScript frameworks at our Github repository: github.com/abtsoftware/scichart.js.examples under the Sandbox folder

Option 2: Load Wasm from URL with SciChartSurface.configure() or useWasmFromCDN()

The easiest way for SciChart.js to load WebAssembly and Data files are to load them from our CDN (see jsdelivr.com/package/npm/scichart). This method is particularly useful in projects or frameworks that don't have a package manager or module bundler.

To do load SciChart's Wasm and Data file from CDN, call SciChartSurface.configure() once before any SciChartSurface is shown:

Configure Wasm and Data File URLs	Copy Code
import { SciChartSurface, libraryVersion } from "scichart"; // Load Wasm & Data files from URL // This URL can be anything, but for example purposes we are loading from JSDelivr CDN SciChartSurface.configure({ dataUrl: `https://cdn.jsdelivr.net/npm/[email protected]${libraryVersion}/_wasm/scichart2d.data`, wasmUrl: `https://cdn.jsdelivr.net/npm/[email protected]${libraryVersion}/_wasm/scichart2d.wasm` });

Configure Wasm and Data File URLs

Copy Code

import { SciChartSurface, libraryVersion } from "scichart";     
// Load Wasm & Data files from URL
// This URL can be anything, but for example purposes we are loading from JSDelivr CDN
SciChartSurface.configure({
   dataUrl: `https://cdn.jsdelivr.net/npm/[email protected]${libraryVersion}/_wasm/scichart2d.data`,
   wasmUrl: `https://cdn.jsdelivr.net/npm/[email protected]${libraryVersion}/_wasm/scichart2d.wasm`
});

We've packaged a helpful function that automatically loads the latest & correct version of SciChart's Wasm & Data files from CDN. To use this, instead of calling SciChartSurface.configure() passing in a URL, call SciChartSurface.useWasmFromCDN().

Load Wasm from CDN	Copy Code
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface"; export async function initSciChart() { // Call this once before any SciChartSurface is shown. // This is equivalent to calling SciChartSurface.configure() with the CDN URL (JSDelivr) SciChartSurface.useWasmFromCDN(); }

Load Wasm from CDN

Copy Code

import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";

export async function initSciChart() {
    // Call this once before any SciChartSurface is shown.
    // This is equivalent to calling SciChartSurface.configure() with the CDN URL (JSDelivr)
    SciChartSurface.useWasmFromCDN();
}

Loading Wasm for 3D Charts

The process for loading Wasm files for 3D Charts is exactly the same, except you must configure SciChart.js to load scichart3d.wasm and scichart3d.data.

This can be done via Webpack/npm or a bundlers, or by calling SciChart3DSurface.useWasmFromCDN() or SciChart3DSurface.configure() as before.

Configure Wasm and Data File URLs	Copy Code
import { SciChartSurface } from "scichart"; // Call this once before any SciChart3DSurface is shown to load wasm from CDN SciChart3DSurface.useWasmFromCDN(); // Alternatively, if you want to host wasm/data files and serve them locally // 1.) Ensure you are serving your wasm & data files // 2.) Call to SciChart3DSurface.configure specifying the relative URL of the files SciChart3DSurface.configure({ dataUrl: `relative/path/to/scichart3d.data`, wasmUrl: `relative/path/to/scichart3d.wasm` });

Configure Wasm and Data File URLs

Copy Code

import { SciChartSurface } from "scichart";     

// Call this once before any SciChart3DSurface is shown to load wasm from CDN
SciChart3DSurface.useWasmFromCDN();
// Alternatively, if you want to host wasm/data files and serve them locally
// 1.) Ensure you are serving your wasm & data files
// 2.) Call to SciChart3DSurface.configure specifying the relative URL of the files
SciChart3DSurface.configure({
   dataUrl: `relative/path/to/scichart3d.data`,
   wasmUrl: `relative/path/to/scichart3d.wasm`
});