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

0
0

Hello, I just started evaluating JS 2D 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 version

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


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:

  1. Restart my webpack-dev-server -> In chrome, “Empty cache and refresh”
  2. Delete my node_modules folder -> yarn install -> yarn start

Can someone please help me with this issue at an earliest convenience.

Version
2.1.2290
  • You must to post comments
0
0

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 over here, 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

  • You must to post comments
0
0

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.

Attachments
  • You must to post comments
0
0

BTW, I forgot to mention, that, when I use your boilerplate, it works without any issues. It would be nice and helpful to others, if you had instructions for using it with CRA and without ejecting for it — since majority of developers use CRA these days anyways.

  • You must to post comments
0
0

Any updates please? Were you able to reproduce the issue from my zip file? I cannot try the charts and am worried I will run out of the trial period.

I am also trying out the charting library from LightningCharts and have no issues with that.

  • You must to post comments
0
1

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!

  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.