How to load a wasm module locally?

Question

I'm trying to make a simple, self-contained (only an .html file and a .wasm file) offline data visualization that uses JavaScript and WebAssembly. However, I'm having troubles loading the WASM module from a local file.

The first trouble is CORS. Trying to load any JS module with a relative or a file:// URL gets me security errors. On Firefox, I managed to disable local CORS, but that's icky and overly permissive. On Chrome, I'd need to start the browser with flags. Those are both non-starters from user perspective. Is there any way to load JS or WASM modules from a local file without running into CORS troubles?

Getting around CORS, the second trouble is that although Firefox is able to load JS modules, it fails with the WASM module: (my actual error message is in Japanese, but I think this is the English one) 'Loading failed for the ".wasm" with source'. No further info is shown. On Chrome, the error message is 'Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.', which suggests that both browsers might be suffering from not being able to guess the MIME type.

These both issues would be solved by setting up a HTTP server, but that entirely defeats the purpose of having a simple, self-contained file/files that need only the browser to run.

Is there a way to load and call WASM with only local files?

score 8 · Answer 1 · answered Dec 18 '20 at 08:02

8

You can encode the wasm as base64 and then load it like this (no size limitation as far as I know - definitely works with 5Mb+)

Module.wasmBinaryFile="data:application/wasm;base64,AGFzbQEAAAABww...

answered Dec 18 '20 at 08:02

murkle

477
4
8

score 6 · Accepted Answer · answered Apr 27 '20 at 01:24

You can inline the Wasm binary as a Uint8Array, and instantiate it this way. It only works if it's small enough, though. I believe you get an error if the Wasm is more than 4KB.

// your Wasm file as a Uint8Array
const wasmSourceCode = new Uint8Array([0, 97, 115, 109 ...]);
const wasmModule = new WebAssembly.Module(wasmSourceCode );
const wasmInstance = new WebAssembly.Instance(wasmModule);

How to load a wasm module locally?

2 Answers2

Linked