WebAssembly in JS

Coding Help
#1

I’m trying to access a function from a .wasm file in JavaScript, but I’m getting a 404. My .wasm file is in the same folder as the .js file that is accessing it.
Here is the code:

WebAssembly.instantiateStreaming(fetch("/bedmas-calculator/cpp.wasm"))
.then(obj => {
  let table = obj.instance.exports.tbl;
  console.log(table.get(0))
  g.set(0, table.get(0))
});

Here’s the error:

image
image823×96 5.76 KB

#2

When I go to your website, I get a different error:

the error
the error719×124 76.5 KB

It’s fetching the file just fine, but it’s not a valid wasm file.
So I fetch'd bedmas-calculator/cpp.wasm from the console, and found that it was actually a wat file - that os, a webassembly text file. If webassembly was anything lke javascript, that would be fine, but webassembly has to be compiled to a binary file.
This is where it becones a bit confusing.
Essentially, you want to rename cpp.wasm to cpp.wat, and then build it using WABT or its javascript equivalent to build it. To use the latter, you’ll need to have a node.js project rather than a static site…
Alternatively, if you’re not going to be changing cpp.wat very often, you could use https://mbebenita.github.io/WasmExplorer/ - paste the wat into the wat section and click download, make sure the file name ends in .wasm and then upload it to your project.
Hopefully this helps - happy glitching!