fix: set Content-Type when serving .wasm files

[lynn]

Description

I'm running into the same issue as mycelial/mycelial-js#25. It seems the vite dev-server doesn't serve .wasm files with the application/wasm Content-Type, so WebAssembly.instantiateStreaming doesn't work.

In mycelial/mycelial-js#25 (comment) the author suggests either patching over this or contributing a fix back to Vite, but I guess they ended up doing the former.

Additional context

I assume this change does the trick but I haven't tested it 😄 I'd like to add a test but I don't know how.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[bluwy]

I'm not sure if the change is at the right spot. The send() function is only called for js, css, json, and html only. I suppose you want to update here instead?

vite/packages/vite/src/node/plugins/asset.ts

Lines 49 to 61 in 229c592

	// add own dictionary entry by directly assigning mrmime
	export function registerCustomMime(): void {
	// https://github.com/lukeed/mrmime/issues/3
	mrmime.mimes['ico'] = 'image/x-icon'
	// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#flac
	mrmime.mimes['flac'] = 'audio/flac'
	// mrmime and mime-db is not released yet: https://github.com/jshttp/mime-db/commit/c9242a9b7d4bb25d7a0c9244adec74aeef08d8a1
	mrmime.mimes['aac'] = 'audio/aac'
	// https://wiki.xiph.org/MIME_Types_and_File_Extensions#.opus_-_audio/ogg
	mrmime.mimes['opus'] = 'audio/ogg'
	// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
	mrmime.mimes['eot'] = 'application/vnd.ms-fontobject'
	}

This should mutate mrmime which is used by sirv to map wasm files

[lynn]

Oh, that's strange... mrmime already has mimes['wasm'] = 'application/wasm'. It relies on mime-db and it's been in there since 2017. In that case I don't understand why Vite serves .wasm files without the right content-type.

This plugin I wrote fixes the issue for me, FWIW:

// vite.config.js

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({
  plugins: [wasmContentTypePlugin],
});

[lynn]

Could this be the right spot?

[bluwy]

Ah didn't see that mrmime already handled wasm, I missed that.

Could this be the right spot?

I don't think so, those are additional headers added at sirv's final step, sirv handled the mime types early on at https://github.com/lukeed/sirv/blob/19c6895483cc71e9ef367f8a6a863af1e558ecb0/packages/sirv/index.js#L46.

Maybe it's worth adding some loggings there to see what's wrong.

[sapphi-red]

@lynn I checked a reproduction: https://stackblitz.com/edit/vitejs-vite-rvb5zt?file=main.js,vite.config.js&terminal=dev
It seems you are facing #8427. Adding optimizeDeps.exclude: ['@mycelial/web'] worked.
The reason why Vite wasn't responding with Content-Type: application/wasm is because /node_modules/.vite/deps/index_bg.wasm was 404.

Closing as Vite does respond with Content-Type: appilcation/wasm.