Cannot init wasmer

[jonathanhuang13]

I'm getting an error when I run:

import { init, Wasmer } from "@wasmer/sdk";

await init();

The error is:

`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:
 TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

Uncaught (in promise) CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

See repro here: https://github.com/jonathanhuang13/wasmer-error-repro

[IbrahimTanyalcin]

If you are using Express JS, use the static module:

const _static = express.static(.....)
app.use('/your/path/to/static/files', _static, function(req, res, next) {......

This will automatically handle the content-type headers. If you are using another server, make sure you add:

Content-Type: application/wasm

http header.

For ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type

[jonathanhuang13]

Hmm I'm not sure I understand. I'm not using a backend. I'm just following this tutorial and the issue happens on the imported init function. What is the init function fetching behind the scenes?

[IbrahimTanyalcin]

@jonathanhuang13 the example you are showing using vite which spins up a server behind the scenes. If you search online you can find examples like:

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'wasm-content-type',
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          if (req.url.endsWith('.wasm')) {
            res.setHeader('Content-Type', 'application/wasm');
          }
          next();
        });
      },
    },
  ],
});

[jonathanhuang13]

Okay, I looked into this a little more and I don't think that's the root issue. When I run vite dev, the server fetches http://localhost:5173/node_modules/.vite/deps/wasmer_js_bg.wasm but that file is an HTML file. It actually happens to be the same as the index.html file.

When I run vite build and vite preview, everything works as expected. The output in the /dist folder includes a wasmer_js_bg.wasm file that is correct. I noticed that @wasmer/sdk is dynamically importing the that wasm file. Seems like vite isn't correctly resolving that file so it falls back to the HTML?

[IbrahimTanyalcin]

If it doesn not resolve corectly on the dev server it would have sent 404 on the Network tab, not a MIME type error. For some reason dev server send the wrong content-type.

[jonathanhuang13]

Okay I found a solution to the issue. Looks like vite's optimizations are causing issues when packages import using import.meta.url (see vitejs/vite#8427). Adding the following in my vite.config.js fixed the problem:

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    exclude: ['@wasmer/sdk'],
  },
});

[themighty1]

Awesome, thanks for the tip
exclude: ['@wasmer/sdk'], worked for me.

[themighty1]

I'll just paste here the entire vite.config.js which worked for me

import { defineConfig } from 'vite'

const wasmContentTypePlugin = {
  name: "wasm-content-type-plugin",
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      if (req.url.endsWith(".wasm")) {
        res.setHeader("Content-Type", "application/wasm");
      }
      next();
    });
  },
};

export default defineConfig({
  optimizeDeps: {
    exclude: ['@wasmer/sdk'],
  },
  plugins: [wasmContentTypePlugin],
  appType: "mpa",
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    }
  }
})