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?
- Paul Hodgson asked 3 years ago
- last edited 3 years ago
- You must login to post comments
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: ".." }
]
}),
- Paul Hodgson answered 3 years ago
- You must login to post comments
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/[email protected]/_wasm/scichart2d.data",
wasmUrl: "https://cdn.jsdelivr.net/npm/[email protected]/_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.
- Paul Hodgson answered 3 years ago
- 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 login to post comments
Please login first to submit.