vite-plugin-wasm-pack icon indicating copy to clipboard operation
vite-plugin-wasm-pack copied to clipboard

Assets path for .wasm file incorrect for subdirectories

Open justindthomas opened this issue 10 months ago • 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?

justindthomas avatar Sep 02 '23 01:09 justindthomas