Cannot use Wasm: Failed to parse URL from .../lib_bg.wasm?init

nmattia commented 2 years ago

Describe the bug

Importing a Wasm module fails, whereas a simple (non-sveltekit) svelte app can load and use the Wasm module just fine.

I'm generating the Wasm module (and project that includes a few js wrappers) using wasm-pack.

Additionally to the repro steps below, I've pushed the code here. This contains three projects:

lib, a rust library that gets compiled to wasm (to avoid building it, use pkg.zip attached in "Reproduction" below
svelte-app, a (default template) svelte app (without sveltekit) that can make use of the Wasm file
sveltekit-app, a (default template) sveltekit app that fails on npm run dev but succeeds on npm run build, although the resulting build is broken.

Reproduction

Initialize a sveltekit project:

npm create svelte@latest sveltekit-app

Add necessary dependencies:

  "dependencies": {
    "lib": "file:../lib/pkg", // the project containing the wasm module
    "vite-plugin-top-level-await": "^1.1.1",
    "vite-plugin-wasm": "^2.1.0"
  },

Update vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import wasm from "vite-plugin-wasm"
import topLevelAwait from "vite-plugin-top-level-await"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [wasm(), topLevelAwait(), sveltekit()]
})

Call e.g. the greet function from the Wasm module from a page:

<script>
  import { greet } from "lib";
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<button on:click={greet}>Say hi</button>

Run npm run dev:

$ npm run dev

  VITE v3.1.0  ready in 754 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
Failed to parse URL from /@fs/Users/nicolas/sveltekit-rust-wasm/lib/pkg/lib_bg.wasm?init
TypeError: Failed to parse URL from /@fs/Users/nicolas/sveltekit-rust-wasm/lib/pkg/lib_bg.wasm?init
    at new Request (/Users/nicolas/sveltekit-rust-wasm/sveltekit-app/node_modules/undici/lib/fetch/request.js:77:15)
    at Agent.fetch (/Users/nicolas/sveltekit-rust-wasm/sveltekit-app/node_modules/undici/lib/fetch/index.js:116:21)
    at fetch (/Users/nicolas/sveltekit-rust-wasm/sveltekit-app/node_modules/undici/index.js:95:22)
    at Module.__vite_ssr_exports__.default (/__vite-plugin-wasm-helper:28:32)
    at /@fs/Users/nicolas/sveltekit-rust-wasm/lib/pkg/lib_bg.wasm:4:50
    at async instantiateModule (file:///Users/nicolas/sveltekit-rust-wasm/sveltekit-app/node_modules/vite/dist/node/chunks/dep-665b0112.js:53333:9)

I've attached the pkg/ which contains the Wasm module (can be a bit cumbersome to generate otherwise).

pkg.zip

Logs

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 196.62 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.14.0 - /nix/store/s9pc5sxyx4cxqq3vyqabjamxjjgpijkb-source/bin/node
    npm: 8.3.1 - /nix/store/s9pc5sxyx4cxqq3vyqabjamxjjgpijkb-source/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.72 
    @sveltejs/kit: next => 1.0.0-next.480 
    svelte: ^3.44.0 => 3.50.1 
    vite: ^3.1.0 => 3.1.0

Severity

blocking all usage of SvelteKit

Additional Information

No response

benmccann commented 2 years ago

Can you provide a GitHub repository with the reproduction? We get too many bugs filed to create the reproduction for each one

This is either a bug with Vite or Undici and not with SvelteKit itself. It'd be nice to figure out which one so you can file the bug in the right place. https://github.com/sveltejs/kit#bug-reporting

nmattia commented 2 years ago

Thanks for the quick reply,

As mentioned in the issue description, I've pushed the code to this repo: https://github.com/nmattia/svelte-rust-wasm/tree/main/sveltekit-app

This is either a bug with Vite or Undici and not with SvelteKit itself.

The repo contains two very similar apps that use the same Wasm module; one is the svelte + vitejs default template, the other one the sveltekit default template. I'm curious why the svelte + vitejs one works out of the box.

EDIT: I've just committed the Wasm code as well. You just just need to run cd sveltekit-app && npm ci && npm run dev for repro.

benmccann commented 1 year ago

I'm curious why the svelte + vitejs one works out of the box.

It's most likely either because the svelte + vitejs one doesn't use SSR (see https://github.com/sveltejs/kit#bug-reporting for details) or because it doesn't use Undici. Either way, you're probably going to need to file this issue elsewhere to see it addressed

gak commented 1 year ago

boyeln commented 1 year ago

We use wasm-pack generated modules with SSR using this vite plugin: https://github.com/omnysecurity/vite-plugin-wasm-esm. Works well for us, but you have to use web as target when building with wasm-pack.

sveltejs / kit