vue.js - Webpack dev server serves wasm with wrong mime type

Question

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?

question from:https://stackoverflow.com/questions/66049662/webpack-dev-server-serves-wasm-with-wrong-mime-type

Answer 1

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.