How to define MIME types with Create-React-App's node server?

I'm trying to deal with this WebAssembly note: "Note: To run with instantiateStreaming and compileStreaming, you need your webserver to serve .wasm file with application/wasm MIME type. The https crate can be used to serve files from localhost, and includes the application/wasm MIME type out of the box."

Indeed, I get a MIME error in the JS console. A Google search revealed no way to configure this. Mozilla recommends instantiateStreaming over the depricated WebAssembly.instantiate. The latter doesn't work for me either, if using stdweb or bindgen: It wants a second argument which I'm not sure how to provide.

Solution

Unfortunately you're working on the bleeding edge here! WebAssembly streaming compilation is a very new feature that is only currently supported in FireFox and Chrome.

You are right that it depends on files being server with the correct mime-type. The changes required to make this happen being made:

node-mime - which is used by many projects (including webpack dev server) to provide mime type based on file extension, was updated to support wasm in Dec 2017 in v2.3.1
webpack-dev-middleware was updated in Nov 2017 to support wasm file extension in v3.1.3

However, these are both up-stream dependencies of create-react-app, via react-scripts. The bleeding edge version of react-scripts has a dependency on webback-dev-middleware that supports wasm, however this hasn't been released yet. The latest version on npm uses an older version.

For now, I'd turn of streaming compilation until these changes make it into 'production'.