First of all, the specifications are as follows.
- use react
- use vite
- use [email protected]
- use [email protected]
The module settings are as follows.
export const SetSciChartSurface = () => {
SciChartSurface.setRuntimeLicenseKey(window.REACT_APP_SCICHART_KEY);
SciChartSurface.configure({
wasmUrl: "./scichart2d.wasm",
dataUrl: "./scichart2d.data",
});
SciChartDefaults.useSharedCache = true;
return SciChartSurface;
};
My problem is nginx, so I can set it as below
location / {
root "C:\nginx\build\indexViewer";
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
If you write it as below, you will get an error like the picture. Of course, the scichart2d.wasm file and the scichart2d.data file have been received well in 200 OK.
location /indexViewer {
alias "C:\nginx\build\IndexViewer";
sub_filter assets/ indexViewer/assets/;
sub_filter_once off;
sub_filter_types *;
}
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
I’ve been struggling for months now. I’ve been sharing projects with different ports through nginx, but I don’t want to do that, so I’ve been using alias. But if you do it with alias instead of root, these problems happen.
I’m hoping that that error doesn’t come out.
2
Answers
My web is good at importing .wassm, .data files. 404 doesn't show up. CDN is not available because the web is a closed network.
I bring the .wassm, .data file well, but the console window displays an error and the chart is not displayed. What you should know here is that if you divide the ports into nginx and distribute it, it works normally. But I don't want to use multiple ports, so if I divide them into nginx alias and distribute them to the same port, there will be a problem. Of course, if you distribute the chart as root on the same port, it works fine.
For example, there was no error in project deployment using 50080 and 50081 ports, but errors occur when distributing 50080 ports divided by path.
an existing thing
127.0.0.1:50080
127.0.0.1:50081
What I want
127.0.0.1:50080/
127.0.0.1:50080/indexViewer
To understand the root cause of the error, firstly check if the expected files are loaded properly: no 404 errors and the appropriate contents of .data and .wasm files are fetched.
Then, to match your location structure use SciChartSurface.configure (or SciChart3DSurface.configure) method to customize URLs for those files.
Refer to the documentation page on Deploying Wasm files for more info.
There is also another tutorial on the scichart site which details errors if Wasm files are not found and the potential solutions. Find this here.
The page suggests some solutions how to debug this using developer tools – first by checking the request URL and next testing that the *.wasm files are served with the correct MIME type and application/octet-stream
Finally, there is a boilerplate example using React and Vite on the scichart Github page: https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/BoilerPlates/react-vite