I'm running the tutorial on webassembly and now I want to run the hello.wasm from my own page.
I'm piling the code using Emscripten as per tutorial's instructions.
Following these instructions in my index.html I'm doing:
const instantiate = (bytes, imports = {}) =>
WebAssemblypile(bytes).then(m =>
new WebAssembly.Instance(m, imports)
)
fetch('hello.wasm')
.then(response => response.arrayBuffer())
.then(bytes => instantiate(bytes, {}))
But I get this error:
So I tried to use WebAssembly.instantiate() from the MDN docs with this code:
const instantiate = (bytes, imports = {}) =>
WebAssemblypile(bytes).then(m =>
WebAssembly.instantiate(m, imports)
)
And I get a different one:
Any idea how to fix it?
I'm running the tutorial on webassembly and now I want to run the hello.wasm from my own page.
I'm piling the code using Emscripten as per tutorial's instructions.
Following these instructions in my index.html I'm doing:
const instantiate = (bytes, imports = {}) =>
WebAssembly.pile(bytes).then(m =>
new WebAssembly.Instance(m, imports)
)
fetch('hello.wasm')
.then(response => response.arrayBuffer())
.then(bytes => instantiate(bytes, {}))
But I get this error:
So I tried to use WebAssembly.instantiate() from the MDN docs with this code:
const instantiate = (bytes, imports = {}) =>
WebAssembly.pile(bytes).then(m =>
WebAssembly.instantiate(m, imports)
)
And I get a different one:
Any idea how to fix it?
Share Improve this question edited Mar 9, 2017 at 8:37 pietro909 asked Mar 8, 2017 at 10:24 pietro909pietro909 1,8611 gold badge19 silver badges28 bronze badges 5-
1
Let's try to narrow the issue: you don't need
pilein your second example, onlyinstantiate: it takes the.wasmbytes and pile+instantiates them. What is theimportsobject? Or do you leave it as default{}? What are your module's declared imports (from Emscripten I assume)? – JF Bastien Commented Mar 8, 2017 at 10:48 -
even if I use the overloaded method of
instantiate, it fails with the same error. I'm passing it an empty object asimportsand I don't know of needed dependencies. – pietro909 Commented Mar 8, 2017 at 13:51 -
2
Emscripten already generates HTML+JS which loads
hello.wasmfor you, including the WebAssembly import object. What Emscripten generates is pretty big because it emulates an OS. The import object basically supplies all the syscalls (to JavaScript). You'd have to pass these in for the example to work... or just use the ones Emscripten already generated. – JF Bastien Commented Mar 8, 2017 at 17:58 - I think your ment together with @Andreas answer should be the right answer. – pietro909 Commented Mar 9, 2017 at 8:38
- Great, I answered with extra info! – JF Bastien Commented Mar 9, 2017 at 11:25
2 Answers
Reset to default 5It wasn't clear from your question, but further ments explain that you leave the import object as {}, leading instantiation to fail. WebAssembly uses a double namespace, where the import object fulfills the WebAssembly.Module's imports. Each import is specified as module+field+kind, which the JavaScript import object must fulfill.
Emscripten already generates HTML+JS which loads hello.wasm for you, including the WebAssembly import object. What Emscripten generates is pretty big because it emulates an OS. The import object supplies all the syscalls (to JavaScript). You'd have to pass these in for the example to work... or just use the ones Emscripten already generated.
The code you're using is expecting a module called env. Emscripten contains code such as:
let importObject = {
env: { foo: () => 42, bar: () => 3.14 }
};
That's the double namespace I mentioned earlier: env is a module, and foo / bar are fields. Their type is function. WebAssembly supports other kinds of imports and exports: table, memory, and global.
Missing a single module, or a module's field, or mismatching the kind, leads to instantiation failure as you're getting.
Apparently, your example module wants to import something from a module named "env". However, the imports object you provide is empty. To make instantiation of your module succeed you need to provide an imports object of the form {env: {...}}, where the dots are properties corresponding to every single import made from "env".