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?

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?

• javascript
• webpack
• rust
• webassembly

• 2 and host the generated files directly — how do you host them? Look at the MIME type of the files in your browser's network inspector in both cases; presumably they differ. Then figure out why they don't match. Then figure out how to make them match. – Shepmaster Commented Jan 22, 2019 at 21:53
• For how I host them, I have tried both a bare bones express.js server to statically host the directory webpack exports to, as well as accessing the files directly through file:///. I get the same error in both cases. – user9614249 Commented Jan 22, 2019 at 22:02
• For the network inspector, everything shows to have been successful. I'm not sure exactly how webpack works, but in reality there are no index.js or bootstrap.js files. There are only bundle.js, 1.bundle.js, and one seemingly randomly named .module.wasm file. All show to have been acquired successfully. – user9614249 Commented Jan 22, 2019 at 22:05
• 1 I'd expect the network transfer to be fine. What do the headers of those files say the MIME types are in the cases it works and doesn't? – Shepmaster Commented Jan 22, 2019 at 22:07
• For .js the content-type is application/javascript, and for the module.wasm file it is application/octet-stream. – user9614249 Commented Jan 22, 2019 at 22:15

3 Answers 3

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