Hello, I just started evaluating your 2D JS chart library and am running into an error (below) and don’t know what I should do to continue forward:
Error:
wasm streaming compile failed: TypeError: Failed to execute ‘compile’
on ‘WebAssembly’: Incorrect response MIME type. Expected
‘application/wasm’.falling back to ArrayBuffer instantiation
failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
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 versionUncaught (in promise) 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 am copying the scichart2d.data and scichart2d.wasm in my webpack config as follows (according to your tutorials):
config.plugins.push(
new CopyPlugin({
patterns: [
// {
// from: 'src/index.html',
// to: '',
// },
{
from: 'node_modules/scichart/_wasm/scichart2d.data',
to: '',
},
{
from: 'node_modules/scichart/_wasm/scichart2d.wasm',
to: '',
},
],
})
I have since then done the following but to no avail:
- Restart my webpack-dev-server -> In chrome, “Empty cache and refresh”
- Delete my node_modules folder -> yarn install -> yarn start
Can someone please help me with this issue at an earliest convenience.
- sachin patel asked 2 years ago
- last edited 9 months ago
- You must login to post comments
Solved. For anyone running into this issue, please follow the guideline below to resolve it.
This only applies if you created your app from CRA. I used SciChart’s “demo-create-react-app-scichart” to solve my issue.
After you have scaffolded your app from CRA, add “copy-files-from-to” as your dev dependency:
npm install --save-dev copy-files-from-to
Then create a file called “copy-files-from-to.json” in the root of your project. The contents of the file should be:
{
"copyFilesSettings": {
"whenFileExists": "overwrite"
},
"copyFiles": [
{
"from": "./node_modules/scichart/_wasm/scichart2d.data",
"to": "./public/scichart2d.data"
},
{
"from": "./node_modules/scichart/_wasm/scichart2d.wasm",
"to": "./public/static/js/scichart2d.wasm"
}
]
}
Then modify the start and build scripts in your package.json as follows:
"scripts": {
"copyWasm": "copy-files-from-to --config copy-files-from-to.json",
"start": "npm run copyWasm && react-scripts start",
"build": "npm run copyWasm && react-scripts build"
},
Now when you run your app using “npm run start”, you should not have the issue. Please note that, for some reason, the initial build takes longer with these steps, but if you change something in the code, the hot-reload just works fine and fast.
That’s all folks!
- sachin patel answered 2 years ago
- last edited 2 years ago
- You must login to post comments
Hi Sachin,
I can see in the output this error:
Uncaught (in promise) 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
Do you have a mismatch in version(s) of SciChart.js here? How have you installed and setup the project?
Please try out one of our boilerplates or getting started guides, and are you seeing the same error?
If you’re still stuck, can you share with us a small GitHub repo or project in a dropbox which reproduces the issue. Our team will be happy to help.
Best regards
Andrew
- Andrew Burnett-Thompson answered 2 years ago
- last edited 9 months ago
- You must login to post comments
Yes, I am still stuck. I have attached a zip file containing my project. Its a simple project – real simple.
I created this project using:
npx create-react-app sci-chart-test --template typescript
npm install scichartjs
npm install --save-dev copy-webpack-plugin react-app-rewired
I needed the copy-webpack-plugin and react-app-rewired to copy .data and .wasm file according to your instructions. Since I created my project using CRA and I did not want to EJECT out of it to change the webpack.config.js, I had to go this route.
In the root of the project, you will find config-overrides.js. This modifies the webpack config by adding the step to copy the two files.
Then I had to change the package.json to use react-app-rewired for start and build script.
Steps to replicate my issue:
1. Download the attached zip file and extract the contents to a folder called “sci-chart-test”
2. CD into that folder
3. npm install
4. npm start
5. Once the app shows up in the browser, open DevTools and you will see the errors in the console.
I am using the “trial” – so please try to use a “trial” version as well.
So far, I have tried in two different browsers — Chrome and Edge — getting errors in both:
Environment:
Windows 10, Version: 21H2, OS Build: 19044.1469
Node: v14.17.6
Npm: v7.14.0
Chrome: Version 99.0.4844.74 (Official Build) (64-bit)
Edge: Version 99.0.1150.39 (Official build) beta (64-bit)
Hope that helps.
- sachin patel answered 2 years ago
- You must login to post comments
Please login first to submit.
