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

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.

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.

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