Loading module was blocked because of a disallowed MIME type (“application/wasm”)

Question

I serve a static file server (through HTTP), which contains data generated by wasm-pack. Using the examples from the rustwasm book, I added this code to my index HTML page:

        <script type="module">
            import init from "./pkg/fstree_web.js";

            async function run() {
                await init();
            }

            run();
        </script>

However, on Firefox, I get the error message as indicated in the title:

module from “http://localhost:8000/pkg/fstree_web_bg.wasm” was blocked because of a disallowed MIME type (“application/wasm”).

I suspected HTTPS issues or localhost issues, so I additionally tried 127.0.0.1, and even tried an https://***.ngrok.io tunnel, and Firefox still rejects loading the wasm module with this error message.

It links to an MDN article about X-Content-Type-Options, but I am not sure how it is relevant. My server is already sending Content-Type: application/wasm.

The JavaScript code generated by wasm-pack starts with this:

import { __cargo_web_snippet_72fc447820458c720c68d0d8e078ede631edd723 } from './snippets/stdweb-bb142200b065bd55/inline133.js';
import { __cargo_web_snippet_97495987af1720d8a9a923fa4683a7b683e3acd6 } from './snippets/stdweb-bb142200b065bd55/inline134.js';
import { __cargo_web_snippet_dc2fd915bd92f9e9c6a3bd15174f1414eee3dbaf } from './snippets/stdweb-bb142200b065bd55/inline135.js';
import { __cargo_web_snippet_1c30acb32a1994a07c75e804ae9855b43f191d63 } from './snippets/stdweb-bb142200b065bd55/inline136.js';
import { wasm_bindgen_initialize } from './snippets/stdweb-bb142200b065bd55/inline293.js';
import * as wasm from './fstree_web_bg.wasm';

Does Firefox want me to send *.wasm as a application/javascript? Or what is wrong?

Answer 1

The importing of WebAssembly modules is not yet standardized. You should set the --target argument of wasm-pack to web to generate JavaScript to use in a browser.

Answer 2

I am not sure if you have/had the same problem as me (trying to do the tutorial without using js-bundler), but I finally got it to work on my end.

Trying to attempt to get a handle on the *.wasm file you generated is already taken care of by the --target web parameter, so you don't actually need to import your *_bg.wasm file, but since the wasm Object (I'm not too sure yet, what this is) is actually returned by the init() function.

So if you want to carry on using the wasm handle, just do:

// Near imports worked for me, but choose your own scope
let wasm;
.
.
.
// instead of await init();
wasm = await init();