WASM+SvelteKit: TypeError: Failed to construct 'URL': Invalid URL on client after successful build #2480

[benwis]

Describe the bug

This is pretty much identical to this bug: #2480, it appears imports.meta.url is still blank in the "next" target of @sveltejs/kit. The primary difference is that I compile Rust into WASM. The JS wrapper that wraps it includes this function, and import.meta.url appears to be blank, causing an error.

async function init(input) {
    if (typeof input === 'undefined') {
        input = new URL('wasm_game_of_life_bg.wasm', import.meta.url);
    }
    const imports = {};
    imports.wbg = {};
    imports.wbg.__wbg_alert_fbbeabc2309f67cb = function(arg0, arg1) {
        alert(getStringFromWasm0(arg0, arg1));
    };

    if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
        input = fetch(input);
    }

I stumbled on this trying to use the vite-plugin-wasm-pack, which builds successfully, but fails whenever you load the page with the error log described below.

As can be seen in the last error log line, the base is never added to the wasm path file. Providing the full path of the wasm to the init() function fixes the issue.

Reproduction

Here is a the sveltekit demo repo. Note that you have have to have the rust toolchain and wasm-pack installed, then compile then run npm run wasm. Then npm run build and npm run dev should get you a working repro. The WASM instantiation code is in index.svelte and is currently hardcoded to work on my machine. Uncommenting the commented code should reproduce the error nicely. Please let me know if you have questions

https://github.com/benwis/sveltekit_rust_demo

Logs

http://localhost:3000/
assets/wasm_game_of_life_bg.wasm
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:371:5)
    at onParseError (node:internal/url:552:9)
    at new URL (node:internal/url:632:5)
    at new Request (file:///Users/benwis/Downloads/sveltekit-demo/node_modules/@sveltejs/kit/dist/install-fetch.js:5907:16)
    at file:///Users/benwis/Downloads/sveltekit-demo/node_modules/@sveltejs/kit/dist/install-fetch.js:6189:19
    at new Promise (<anonymous>)
    at fetch (file:///Users/benwis/Downloads/sveltekit-demo/node_modules/@sveltejs/kit/dist/install-fetch.js:6187:9)
    at Module.init [as default] (@vite-plugin-wasm-pack@wasm_game_of_life:85:17)
    at loadWASM (/src/routes/index.svelte:23:32)
    at eval (/src/routes/index.svelte:29:2) {
  input: 'assets/wasm_game_of_life_bg.wasm',
  code: 'ERR_INVALID_URL'
}

System Info

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 99.73 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.1.0 - ~/.nvm/versions/node/v17.1.0/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v17.1.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Firefox: 95.0.2
    Firefox Developer Edition: 92.0
    Safari: 15.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.14 
    @sveltejs/kit: next => 1.0.0-next.240 
    svelte: ^3.44.0 => 3.46.2 
    vite: ^2.7.13 => 2.7.13

Severity

serious, but I can work around it

Additional Information

While I can hardcode a URL based on a known deployment path, it's a pretty clunky solution. Would love to get that fixed!

[benmccann]

This is rather unlikely to be an issue in SvelteKit, but more likely to be an issue in Vite, so I'm going to go ahead and close this and suggest you use the Vite issue tracker: https://github.com/sveltejs/kit#bug-reporting

Sorry I can't be of more help. We do sometimes fix bugs in Vite if they seem more likely to be hit by SvelteKit users than the average Vite user or important to support a core feature in SvelteKit. But there's hundreds of open issues in the Vite repo and we can't realistically have a duplicate of each of them filed here.

This issue in the Vite issue tracker looks fairly related: vitejs/vite#5075