SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Answered
1
0

I am having problem instantiating SciChart.js within a specific project and was hoping you might be able to help. To provide context I can run SciChart fine in simple projects and I suspect that I have a webpack issue.

When running a simple graph instantiation such as –

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";

export function MipsGraph(props) {
    useEffect(() => {       
        initSciChart();
    });

    return (
        <div id="depthGraph" style={{height: "100%"}} ></div>
    );
}

async function initSciChart() {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create("depthGraph");

    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);

    sciChartSurface.xAxes.add(xAxis);
    sciChartSurface.yAxes.add(yAxis);
}

I see the following error

Uncaught (in promise) RuntimeError: abort(TypeError:
WebAssembly.instantiate(): Import #0 module=”env” error: module is not
an object or function). Build with -s ASSERTIONS=1 for more info.

and the warning –

wasm streaming compile failed: TypeError: WebAssembly.instantiate():
Import #0 module=”env” error: module is not an object or function

The warning is raised at line 7544 (after pretty print in chrome dev tools) of scichart2d.js?formatted at a line calling WebAssembly.instantiateStreaming(e,d). both e and d have values.

Debugging originally led me to believe that there was an issue finding the scichart2d.wasm file however network traffic clearly shows the file being fetched.

Any ideas?

Version
1.4.1633
Images
  • You must to post comments
Best Answer
1
0

I found the problem.

The lines in webpack to copy the .data and .wasm files were wrong in this project and old versions of those files had been manually copied to the right location.

The lines originally read

 plugins: [
        new CopyPlugin({
            patterns: [
                { from: "node_modules/scichart/_wasm/scichart2d.data"},
                { from: "node_modules/scichart/_wasm/scichart2d.wasm" }
            ]
        })

And have been modified to

 plugins: [
        new CopyPlugin({
            patterns: [
                { from: "node_modules/scichart/_wasm/scichart2d.data", to: ".."},
                { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: ".." }
            ]
        }),
  • You must to post comments
1
0

Further information –

Configuring SciChart to fetch the .wasm and .data files from the CDN results in the correct behaviour –

SciChartSurface.configure({
    dataUrl: "https://cdn.jsdelivr.net/npm/scichart@1.4.1633/_wasm/scichart2d.data",
    wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@1.4.1633/_wasm/scichart2d.wasm"
});

However, configuring SciChart to use the files copied by webpack does not –

SciChartSurface.configure({
    dataUrl: "/scichart2d.data",
    wasmUrl: "/scichart2d.wasm"
});

The failure still occurs if I overwrite .data and .wasm files install by NPM with those on the CDN.

I suspect it’s worth noting that this is an ASP.net core 3.1 project.

  • Andrew Burnett-Thompson
    Hi Paul! Glad you found the answer so quickly! Yes the SciChartSurface.configure() api is designed to be used to pull the wasm/data files from our CDN. You will notice the version number in the URL – this must match the version number of the scichart library you use. With this method you won’t need webpack at all. SciChart will download the data/wasm from CDN and cache it in your browser. Pros: easy to setup, cached files. Cons: requires an internet connection. Thanks and regards, Andrew
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.