Why do I get the error "Response has unsupported MIME type" after bundling Wasm together, but not when serving with the webpack dev server?

Question

I am trying to make a Rust WebAssembly project and have modified the rust-webpack-template as my starting point. The template is a webpack project with a JavaScript file that calls a single Wasm function and the Rust Wasm takes over from there.

I have modified the template because I would like to have my main logic in JavaScript and call the Rust Wasm through an API.

I have changed the webpack entry to bootstrap.js shown below.

// bootstrap.js
import("./index.js").catch(e => 
    console.error("Error importing 'index.js':", e)
);

I added the file index.js and it calls the Rust Wasm functions

// index.js
import * as wasm from "../crate/pkg/rust_webpack";

const title = document.getElementById("msg");

title.innerText = wasm.get_msg();

The get_msg function from Rust looks like this:

#[wasm_bindgen]
pub fn get_msg() -> String {
    "Hello from Rust WebAssembly!".to_owned()
}

When I run the project using webpack-dev-server -d, everything works fine.

However, when I build the project using webpack and try and host the generated files directly, nothing is displayed and the browser console displays the error:

Error importing 'index.js': TypeError: "Response has unsupported MIME type"

This error comes from the code in bootstrap.js but I'm not entirely sure what it means or how to fix this error.

Why do things work when serving with the webpack dev server but not after bundling everything together?

Answer 1

As Shepmaster helped me to figure out in the comments, the MIME type of the .wasm file is being set to application/octet-stream when the browser expects it to be application/wasm.

I am using a simple express server to host my files. Express can be configured to use the correct MIME type with a single line.

var express = require('express');
var app = express();

// Set the MIME type explicitly
express.static.mime.define({'application/wasm': ['wasm']});

app.use(express.static('./dist'));

app.listen(3000);

According to this issue, express will handle .wasm files correctly after version 4.17. It works correctly in webpack dev server because they implemented their own workaround while they wait for the fix in express.

Answer 2

I also encountered this problem, leading me to change my .htaccess file (I'm using Apache to host my local server) to include the following: AddType application/wasm wasm

If the error persists, and you are getting this error from using WebAssembly.instantiateStreaming, this related question may have an explanation and workaround: WebAssembly InstantiateStreaming Wrong MIME type

Answer 3

I had a similar problem ("Response has unsupported MIME type") with Flask. The problem was that I didn't have a separate route to the .wasm file. For example:

@app.route('/path/to/file.wasm')
def wasm_file():
    return send_file('/path/to/file.wasm', mimetype = 'application/wasm');

It is not the answer to this question, but it's a hint for other people who have a similar problem.