CODEWITHSUNDEEP
expresswebassembly
Ricardo Machado
Ricardo Machado

Reputation: 847

TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'

I'm trying to load a .wasm file using the fetch api on Chrome , and serving a html file using express. But chrome does not let me load the file:

'Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.'

Here is my files:

/public/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
          WebAssembly.instantiateStreaming(fetch('http://localhost:3000/simple.wasm'))
      .then(obj => {
       console.log(obj.instance.exports.add(1, 2));  // "3"
      });
    </script>
  </body>
</html>

Served by Express:

/index.js

const express = require('express')
express.static.mime.define({'application/wasm': ['wasm']})
var app = express();

app.use('/', express.static('public'));

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

Can i add a new mime type to express when serving a .wasm file? Or allow chrome to accept it? I dont have any idea for how to solve it ^^

See: http://kripken.github.io/emscripten-site/docs/compiling/WebAssembly.html

Web server setup
To serve wasm in the most efficient way over the network, make sure your web server has the proper MIME time for .wasm files, which is application/wasm. That will allow streaming compilation, where the browser can start to compile code as it downloads.

In Apache, you can do this with

AddType application/wasm .wasm
Also make sure that gzip is enabled:

AddOutputFilterByType DEFLATE application/wasm

Thank you everyone!

Upvotes: 37

Views: 59895

Answers (4)

Yuhao Tiger Huang
Yuhao Tiger Huang

Reputation: 341

A quick search gives me this answer

express.static.mime.define({'application/octet-stream': ['csv']})

from here

Upvotes: 4

Lucio Paiva
Lucio Paiva

Reputation: 20875

One possible workaround is to use instantiate() instead of instantiateStreaming(), since the former doesn't care about MIME types (while the latter does). To use instantiate():

async function fetchAndInstantiate() {
    const response = await fetch("http://localhost:3000/simple.wasm");
    const buffer = await response.arrayBuffer();
    const obj = await WebAssembly.instantiate(buffer);
    console.log(obj.instance.exports.add(1, 2));  // "3"
}

Upvotes: 21

hoogw
hoogw

Reputation: 5563

The reason is, node.js express.js server failed to recoganize file type .wasm

So it by default set response header to application/octet-stream

enter image description here

enable express.js recognize .wasm file by,

update type-is version to 1.6.16 + because 1.6.16 add support .wasm file

enter image description here

But how to make it work? Share my working example:

1)Now install type-is, run 

      npm install type-is

Make sure package.json type-is version is 1.6.18

enter image description here

2)make sure your express.js version is 4.17, if not update express.js from 4.15 to 4.17 by modify package.json file, change 4.15 to 4.17 as picture show enter image description here

then run npm install express

4.15 does NOT support type-is, so must upgrade to 4.17

app.js file add log, output current running express version just make sure it is 4.17

enter image description here

Now my express.js support .wasm file by response correct header content-type application/wasm

Upvotes: 5

oToToT
oToToT

Reputation: 43

Maybe the issue of Express on github would help.

You just need to wait for the new express published.

Or try the solution provided by lynncyrin (this doesn't help me.)

Upvotes: 2

Related Questions