Incorrect MIME type when loading WebAssembly module with Vite

[stdriz]

Description

When loading the libpg-query WebAssembly module via Vite, the streaming compile fails due to an incorrect MIME type (text/html), and the fallback ArrayBuffer instantiation errors out with a magic-word mismatch.

Reproduction

https://stackblitz.com/edit/reprolibpgquery-fqbyj4us?file=src/main.ts

Expected behavior

The .wasm module should be served with application/wasm and instantiate successfully.

Actual behavior

client:789 [vite] connecting...
client:912 [vite] connected.
libpg-query.js?v=c2aa8f51:219 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
instantiateAsync @ libpg-query.js?v=c2aa8f51:219
await in instantiateAsync
createWasm @ libpg-query.js?v=c2aa8f51:251
(anonymous) @ libpg-query.js?v=c2aa8f51:2411
(anonymous) @ libpg-query.js?v=c2aa8f51:2569
libpg-query.js?v=c2aa8f51:220 falling back to ArrayBuffer instantiation
instantiateAsync @ libpg-query.js?v=c2aa8f51:220
await in instantiateAsync
createWasm @ libpg-query.js?v=c2aa8f51:251
(anonymous) @ libpg-query.js?v=c2aa8f51:2411
(anonymous) @ libpg-query.js?v=c2aa8f51:2569
libpg-query.js?v=c2aa8f51:208 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
instantiateArrayBuffer @ libpg-query.js?v=c2aa8f51:208
await in instantiateArrayBuffer
instantiateAsync @ libpg-query.js?v=c2aa8f51:223
await in instantiateAsync
createWasm @ libpg-query.js?v=c2aa8f51:251
(anonymous) @ libpg-query.js?v=c2aa8f51:2411
(anonymous) @ libpg-query.js?v=c2aa8f51:2569
libpg-query.js?v=c2aa8f51:172 Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0)
abort @ libpg-query.js?v=c2aa8f51:172
instantiateArrayBuffer @ libpg-query.js?v=c2aa8f51:209
await in instantiateArrayBuffer
instantiateAsync @ libpg-query.js?v=c2aa8f51:223
await in instantiateAsync
createWasm @ libpg-query.js?v=c2aa8f51:251
(anonymous) @ libpg-query.js?v=c2aa8f51:2411
(anonymous) @ libpg-query.js?v=c2aa8f51:2569
libpg-query.js?v=c2aa8f51:175 Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info.
    at abort (libpg-query.js?v=c2aa8f51:175:19)
    at instantiateArrayBuffer (libpg-query.js?v=c2aa8f51:209:13)
    at async createWasm (libpg-query.js?v=c2aa8f51:251:24)
    at async libpg-query.js?v=c2aa8f51:2411:27
abort @ libpg-query.js?v=c2aa8f51:175
instantiateArrayBuffer @ libpg-query.js?v=c2aa8f51:209
await in instantiateArrayBuffer
instantiateAsync @ libpg-query.js?v=c2aa8f51:223
await in instantiateAsync
createWasm @ libpg-query.js?v=c2aa8f51:251
(anonymous) @ libpg-query.js?v=c2aa8f51:2411
(anonymous) @ libpg-query.js?v=c2aa8f51:2569

[pyramation]

Hey there 👋🏻

Thanks for reporting this!

Just a heads-up — setting MIME types is usually handled by the server or bundler (like Vite), not by the npm package itself. So if you're seeing a MIME type issue, it's likely due to how the .wasm file is being served in your setup.

If you can share a minimal reproducible example (like a GitHub repo), I’d be happy to take a look and help debug.

From the packaging side, the npm module seems to be working as expected, but I’ll definitely keep an eye on this in case more folks run into it.

Thanks again!

[pyramation]

try this https://www.answeroverflow.com/m/1257523756470112306

https://github.com/Menci/vite-plugin-wasm#readme

[stdriz]

@pyramation Thanks for your kind explanation!

I've put together a minimal reproduction here: https://github.com/stdriz/repro-libpg-query.

In it, I've installed web-tree-sitter to demonstrate that Vite can successfully load a WASM module, and also the import pattern is almost identical to how libpg-query brings in its own .wasm. However, when I build the app, I've noticed that libpg-query.wasm doesn't get bundled.