Add application/wasm mime to Apollo web server

apollo
1

Greetings!

I am incorporating rust module with javascript (meteor/apollo/react) and got this error:
TypeError: Response has unsupported MIME type

After reaching online, I believe I need at mime type application/wasm to the web server. I have done some reach in accomplishing the task, found no solution.

Please advice if you have any hint/pointer/solution.

Regards,
Chunde

2

How are you sharing / accessing the wasm module?

It’s going to depend on how you’re trying to access it, but it’s possible you will need to set up a custom route?

3

I use stdweb crate. her e is an example:

My project uses meteor/apollo/react, interact with stdweb.
The javascript side loads .js file generated from rust/stdweb, which loads .wasm file.
but the main app can not recognize the mime type of .wasm.

Regards,
G

4

I have been searching for a solution, found none. But I did have some more info to record for the issue.
need to set meteor/node server’s response/header ‘Content-Type’ to ‘application/wasm’ for file with extension ‘.wasm’.
the questions are: where should it be set? client/main.js? what are the api’s?

Here is my top level client code:

Meteor.startup(() => {

#render(
  # <BrowserRouter>
      #  <ApolloProvider client={client}>
            #<App />
       # </ApolloProvider>
  #  </BrowserRouter>, document.getElementById('app'));

#});
#registerServiceWorker();

5

I would do it with a custom server-side route definition using WebApp.connectHandlers

If you put the files in /private/wasm/, you can serve everything in there with the correct content-type like so:

import URL from 'url';
import { WebApp } from 'meteor/webapp';

WebApp.connectHandlers.use('/wasm', function(req, res, next) {
    const { pathname } = URL.parse(req.url);
    try {
        const file = Assets.getBinary('/wasm/' + pathname);
        res.setHeader('Content-Type', 'application/wasm');
        res.end(file);
    } catch (error) {
        // File doesn't exist
        next();
    }
});

And then on the client, point to /wasm/filename.wasm and it should be fetched with the correct content type.
I’m unfamiliar with what stdweb expects in terms of file structure, but the same principle would apply if you wanted to intercept requests to other routes (or anywhere)

I haven’t tested this, but this is the kind of thing I usually do when I need finer control over content type and server response

1 Like
6

Much appreciated. Additional info is that the setup I have was working for months until I upgraded rust libs and could not go back to old setup.
Let me try to incorporate your solution with environment I have.
stdweb generates a js file as .wasm file wraper. I put them in ‘public’ dir.
I assume your code should go client/main.js.
I have modified your code and remove /wasm/. main.js may not be the right place to put it, as I traced with a debugger, the code never executed. I also attached my main.html file where the wasm wraper file is include.

Your code with modification:
WebApp.connectHandlers.use((req, res, next) => {
const { pathname } = URL.parse(req.url);
try {
const file = Assets.getBinary(pathname);
res.setHeader(‘Content-Type’, ‘application/wasm’);
res.end(file);
} catch (error) {
// File doesn’t exist
next();
}
});

client/main.html file has:

<script type=“application/javascript” src=“arti_intel.js” > </script >

7

When the intercept code is in server/main.js, it gets executed but intercepted traffic does not have to do with .wasm file:
WebApp.connectHandlers.use((req, res, next) => {
const ext = req.url.split(’.’).pop().split(/#|?/)[0];

    console.log("server/WebApp.connectHandlers.use/req: ");
    console.log(req);
    //console.log("server/WebApp.connectHandlers.use/res: ");
    //console.log(res);
    if (ext == "wasm") {
        res.writeHead(200, {'Content-Type': 'application/wasm'});
        res.end;
    }

});

Thanks.

1 Like
8

tested and edited

WebApp.connectHandlers.use(’/wasm’, (req, res, next) => {
const {pathname} = URL.parse(req.url);
try {
const file = Assets.getBinary(‘wasm’ + pathname);
res.setHeader(‘Content-Type’, ‘application/wasm’);
res.end(file);
} catch (error) {
// File doesn’t exist
next();
}
});

1 Like