title: WebAssembly InstantiateStreaming Wrong MIME type
body: <p>I am attempting to get this tutorial (here: <a href="https://www.hellorust.com/demos/add/index.html" rel="noreferrer">https://www.hellorust.com/demos/add/index.html</a>) to work, and it seems that whatever I do, I cannot get the WebAssembly MDN reserved function to properly work. </p>
  
  <p>So, I followed the instructions on the link above and got an <code>add.wasm</code> file. As far as I can tell this should be fairly simple and should work. After a little digging I found that the newest WebAssembly module is to instantiate streaming - the documentation for which can be found here: (<a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API" rel="noreferrer">https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API</a>). </p>
  
  <p>The MDN example says to do the following: </p>
  
  <pre><code>var importObject = {
    imports: { imported_func: arg =&gt; console.log(arg) }
  };
  </code></pre>
  
  <p>then </p>
  
  <pre><code>WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
  .then(obj =&gt; obj.instance.exports.exported_func());
  </code></pre>
  
  <p>According to MDN the importObject is to unwrap the nested argument. Weird, but OK. </p>
  
  <p>To make this as simple as possible I put the <code>add.wasm</code> file and the <code>js</code> file that would import it in the same directory and then did then following (<strong>NOTE</strong>: I am using Vue.js, but for anyone familiar with SPA like libraries this should be similar):</p>
  
  <pre><code>window.WebAssembly.instantiateStreaming(fetch('./add.wasm', {
    headers: {
      "Content-Type": "application/wasm",
    },
  }), importObject)
  .then(obj =&gt; {
    console.log('inside return obj from WebAssembly initiateStreaming')
    obj =&gt; obj.instance.exports.exported_func() 
  })
  .catch(error=&gt;{
    console.log('there was some error; ', error)
  });
  </code></pre>
  
  <p>The error I get back is: </p>
  
  <pre><code>there was some error;  TypeError: "Response has unsupported MIME type"
  </code></pre>
  
  <p>I've tried not adding the header to the fetch request, using <code>fetch(add.wasm)</code>, dropping the <code>window.</code>, dropping the <code>importObject</code> entirely and simple logging <code>obj</code> to console. Nothing appears to work. </p>
  
  <p>It may be that I have to add the <code>application/wasm</code> field to webpack somehow if it is not widely supported, but I'm not sure and I haven't seen any examples online. </p>
  
  <p>Does anyone know how to get this to work?</p>
  
  <p>EDIT: </p>
  
  <p>Someone suggested that since this was a fetch request it had to be making the request from a backend server. This made sense to me, so I did the following: </p>
  
  <pre><code>    WebAssembly.instantiateStreaming(fetch('http://localhost:8000/files/add.wasm'), importObject)
      .then(obj =&gt; {
        console.log('inside return obj from WebAssembly initiateStreaming')
        obj =&gt; obj.instance.exports.exported_func()
      })
      .catch(error=&gt;{
        console.log('there was some error; ', error)
      });
  </code></pre>
  
  <p>Where <code>http://localhost:8000/files/{someFile}</code> is a backend route that serves my files (which I made sure to put <code>add.wasm</code> in of course). Unfortunately, I get the same error (i.e. <code>unrecognized MIME type</code>) and I'm not sure why.</p>