4

I'm running the tutorial on webassembly.org and now I want to run the hello.wasm from my own page. I'm compiling the code using Emscripten as per tutorial's instructions.

Following these instructions in my index.html I'm doing:

const instantiate = (bytes, imports = {}) =>
  WebAssembly.compile(bytes).then(m =>
    new WebAssembly.Instance(m, imports)
  )

fetch('hello.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => instantiate(bytes, {}))

But I get this error:

RangeError

So I tried to use WebAssembly.instantiate() from the MDN docs with this code:

const instantiate = (bytes, imports = {}) =>
  WebAssembly.compile(bytes).then(m =>
    WebAssembly.instantiate(m, imports)
  )

And I get a different one:

LinkError

Any idea how to fix it?

5
  • 1
    Let's try to narrow the issue: you don't need compile in your second example, only instantiate: it takes the .wasm bytes and compile+instantiates them. What is the imports object? Or do you leave it as default {}? What are your module's declared imports (from Emscripten I assume)? 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 as imports and I don't know of needed dependencies. Commented Mar 8, 2017 at 13:51
  • 2
    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 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. Commented Mar 8, 2017 at 17:58
  • I think your comment together with @Andreas answer should be the right answer. Commented Mar 9, 2017 at 8:38
  • Great, I answered with extra info! Commented Mar 9, 2017 at 11:25

2 Answers 2

5

It wasn't clear from your question, but further comments 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.

Sign up to request clarification or add additional context in comments.

1 Comment

@Bastien, Can WASM module call the functions defined in the impoerObject.env? if possible how?
2

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".

2 Comments

yeah, I think it too. But how can I get those dependencies? Now I'm trying to decompile the wasm and see what are the import statements.
I've updated my question with a direct reference to Emscripten, which is included in the tutorial. Although your answer is basically correct, I think that it should be completed with JF Bastien's comment which is more specific and then useful for future references.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.