CODEWITHSUNDEEP
vue.jsnpmnpm-installwebpack-dev-serverwebassembly
Antonis Christofides
Antonis Christofides

Reputation: 6939

Webpack dev server serves wasm with wrong mime type

I'm using Vue 2 (but I think that my question isn't Vue-specific). The application uses a WebAssembly library of mine that I've installed with npm install [directory_name]. When I run npm run serve, it serves the .wasm file as text/html instead of application/wasm.

I add this to vue.config.js:

module.exports = {
  // ...
  devServer: {
    mimeTypes: { 'application/wasm': ['wasm'] },
  },
};

But in that case, I get this:

Error: Attempt to change mapping for "wasm" extension from "application/wasm" to "application/wasm". Pass force=true to allow this, otherwise remove "wasm" from the list of extensions for "application/wasm".

Is it possible cli-vue-service/webpack-dev-server already knows about .wasm files, and I've understood something wrong about how we install libraries with npm install?

Upvotes: 2

Views: 2694

Answers (2)

Dylan P
Dylan P

Reputation: 302

Btw I came here after getting this error:

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

I had a typo in my wasm fetch URL and I was fetching a file that didn't exist, but it was giving me this mime type error. Once I fixed the typo, everything worked. I didn't have to add the mime type to the webpack config. (maybe they fixed it since you posted in February.) I'm using the Vue development server.

Upvotes: 0

Antonis Christofides
Antonis Christofides

Reputation: 6939

I'm answering my own question.

It's tricky (assuming it's possible) to get webpack to load the .wasm file because of the way webpack works. What I did was add -s "SINGLE_FILE=1" to emcc's options so that it does not produce a .wasm file; instead, it embeds the wasm in the glue .js file.

Upvotes: 3

Related Questions