Assets path for .wasm file incorrect for subdirectories
justindthomas opened this issue · 0 comments
For paths like server.name/path
, the wasm modules load fine (from server.name/assets/module_bg.wasm
). But for paths like server.name/enitity/3324-3252-2352-2352
, Vite tries to load the wasm modules from server.name/entity/assets/module_bg.wasm
, which fails.
This is only evident on the production server - when I run yarn dev
in SvelteKit, everything works fine. But running on the node adapter, this breaks. I've tried all the configuration changes I can think of to get it to point to the right place (e.g., base: "", explicit assets path, etc.) but nothing I do seems to have any effect.
Working example in dev:
Browse to: https://enigmatick.jdt.dev/notes/1b340d17-2931-4801-96e3-0c591ebd6754
Browser Console
[vite] connecting... [client.ts:19:8](https://enigmatick.jdt.dev/@vite/client.ts)
[vite] connected. [client.ts:134:14](https://enigmatick.jdt.dev/@vite/client.ts)
Loading /assets/enigmatick_wasm_bg.wasm using `window.fetch`. For best results, use the `fetch` that is passed to your `load` function: https://kit.svelte.dev/docs/load#making-fetch-requests [client.js:1956:15](https://enigmatick.jdt.dev/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=3bc5a432)
Loading https://enigmatick.jdt.dev/api/v2/instance using `window.fetch`. For best results, use the `fetch` that is passed to your `load` function: https://kit.svelte.dev/docs/load#making-fetch-requests [client.js:1956:15](https://enigmatick.jdt.dev/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=3bc5a432)
enigmatick.jdt.dev [+layout.svelte:30:11](https://enigmatick.jdt.dev/src/routes/+layout.svelte)
https://enigmatick.jdt.dev/ [+layout.svelte:31:11](https://enigmatick.jdt.dev/src/routes/+layout.svelte)
Loading /notes/1b340d17-2931-4801-96e3-0c591ebd6754 using `window.fetch`. For best results, use the `fetch` that is passed to your `load` function: https://kit.svelte.dev/docs/load#making-fetch-requests [client.js:1956:15](https://enigmatick.jdt.dev/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=3bc5a432)
Loading /assets/enigmatick_olm_bg.wasm using `window.fetch`. For best results, use the `fetch` that is passed to your `load` function: https://kit.svelte.dev/docs/load#making-fetch-requests [client.js:1956:15](https://enigmatick.jdt.dev/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=3bc5a432)
Loading https://enigmatick.jdt.dev/user/justin using `window.fetch`. For best results, use the `fetch` that is passed to your `load` function: https://kit.svelte.dev/docs/load#making-fetch-requests [client.js:1956:15](https://enigmatick.jdt.dev/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=3bc5a432)
Object { note: {…}, actor: {…}, published: "2023-08-23T05:54:00.006Z", replies: Map(0) }
[+page.svelte:27:12](https://enigmatick.jdt.dev/src/routes/notes/[uuid]/+page.svelte)
Failing example in prod:
Browse to: https://enigmatick.social/notes/83203934-165e-41e9-b7ae-c9ce3272eed4
Browser Console
XHRGET
https://enigmatick.social/notes/assets/enigmatick_wasm_bg.wasm
[HTTP/1.1 404 Not Found 224ms]
`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: WebAssembly: Response has unsupported MIME type 'text/html' expected 'application/wasm' [@vite-plugin-wasm-pack@enigmatick_wasm.bb9277c0.js:2:29411](https://enigmatick.social/_app/immutable/chunks/@vite-plugin-wasm-pack@enigmatick_wasm.bb9277c0.js)
Uncaught (in promise) CompileError: wasm validation error: at offset 4: failed to match magic number
Immutable 11
<anonymous> https://enigmatick.social/notes/83203934-165e-41e9-b7ae-c9ce3272eed4:142
promise callback* https://enigmatick.social/notes/83203934-165e-41e9-b7ae-c9ce3272eed4:141
[@vite-plugin-wasm-pack@enigmatick_wasm.bb9277c0.js line 2 > WebAssembly.instantiate:2](https://enigmatick.social/_app/immutable/chunks/@vite-plugin-wasm-pack@enigmatick_wasm.bb9277c0.js%20line%202%20%3E%20WebAssembly.instantiate)
My vite.config.js looks like this:
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import wasmPack from 'vite-plugin-wasm-pack';
import inject from '@rollup/plugin-inject';
export default defineConfig({
plugins: [wasmPack('./wasm/enigmatick_wasm'), wasmPack('./wasm/enigmatick_olm'), sveltekit()],
resolve: {
alias: {
path: 'path-browserify'
}
},
build: {
rollupOptions: {
plugins: [inject({ Buffer: ['buffer', 'Buffer'] })]
}
},
})
Note that this is the only page I have that's two levels deep. All of the other pages at just one level work fine. Is there something I can do to fix this?