Reputation: 847
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
Reputation: 341
A quick search gives me this answer
express.static.mime.define({'application/octet-stream': ['csv']})
from here
Upvotes: 4
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
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
enable express.js recognize .wasm file by,
update type-is version to 1.6.16 + because 1.6.16 add support .wasm file
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
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
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
Now my express.js support .wasm file by response correct header content-type application/wasm
Upvotes: 5
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